邊框陰影

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