边框阴影

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