Border за коробкой тень

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