Question

这是我的JSFiddle：http://jsfiddle.net/7FFRV/1/

我试图让蓝色边框落在红色圆圈的盒子阴影后面，但是在容器前面。我该怎么做？

HTML：

<div class="container">
    <div class="image"></div>
</div>

CSS：

.container {
    width: 250px;
    height: 250px;
    padding: 30px;
    background: #fbfbfb;
    border: 1px solid black;
}

.image {
    width: 150px;
    height: 150px;
    background: red;
    border-radius: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.image:after {
    content: "";
    position: absolute;
    left: -0;
    width: 150px;
    height: 150px;
    border-radius: 500px;
    border: 10px solid #0077ca;
}

Answer 1

如果你只是使用这两个形状，你可以反转哪一个是形状，哪一个是蓝色边框：DEMO

.image:after {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    background: red;
    border-radius: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
    position: relative;
    margin-left: 100px;
}

.image {
    position: absolute;
    left: 0;
    width: 150px;
    height: 150px;
    border-radius: 500px;
    border: 10px solid #0077ca;
}

如果您正在寻找它们完美重叠，只需从伪元素中删除position: relative; margin-left; 100px;即可。如果是这种情况，那么无论哪个是实际元素都是无关紧要的，就内容而言，哪个是伪元素。

Answer 2

这是一个小技巧......只是操纵它。 http://jsfiddle.net/cornelas/7FFRV/2/

.image:after {
    background: radial-gradient(ellipse at center center , #FF0000 62%, #E0E0E0 80%, #1E5799 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 10px solid #0077CA;
    border-radius: 500px;
    content: "";
    height: 150px;
    left: 29px;
    position: absolute;
    top: 29px;
    width: 150px;
}

在箱子阴影后的边界

2 个答案: