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，右侧落在容器外面。知道如何解决这个问题吗？

到目前为止我做了什么：

浮动绝对定位的伪元素并没有帮助。

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;
}

在开发人员工具中测试过，它可以正常工作。

Answer 2

你可以给你的＆＃34;通用包装＆＃34;一个盒子阴影（如果你进入那种东西，那就是2个）

.universal-wrapper {
    box-shadow: 15px 0 15px -8px rgba(0, 0, 0, .5), 15px 0 15px 8px rgba(0, 0, 0, .5);
}

类似的东西。

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

2 个答案: