css - 框阴影后面的边框

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;左边距； 100px; 来自伪元素。如果是这种情况，就内容而言，哪个是实际元素哪个是伪元素就无关紧要了。