html - 盒子阴影右侧从容器中掉出

Question

我使用以下 CSS 为我的容器添加了一些框阴影:

.universal-wrapper{ 
    max-width: 1170px;
    margin: 20px auto 0 auto;
    position: relative;
}
.universal-wrapper:before {
    box-shadow: -15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
    display: inline-block;
}
.universal-wrapper:after {
    box-shadow: 15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
    display: inline-block;
}

然而，as you can see ，右侧落在容器外。知道如何解决这个问题吗？

到目前为止我做了什么:

• float 了绝对定位的伪元素，但没有帮助。

Answer 1

您需要将 :after 伪元素绝对定位在顶部，因此您需要添加 top:0。这样做时，伪元素绝对位于顶部，相对于父元素 .universal-wrapper。

.universal-wrapper:after {
    box-shadow: 15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
    display: inline-block;
    top: 0;
}

在开发者工具中测试，它有效。