盒子阴影后面的边框答案

【问题标题】：Border behind box shadow盒子阴影后面的边框
【发布时间】：2014-01-07 21:38:47
【问题描述】：

这是我的 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;
}

【问题讨论】：

标签： css

【解决方案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;。如果是这种情况，就内容而言，哪个是实际元素，哪个是伪元素都没有关系。

【讨论】：

【解决方案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;
}

【讨论】：