Как добавить вторую рамку вокруг CSS круг

Question

У меня есть следующие CSS, который создает красный круг (JS скрипку здесь: http://jsfiddle.net/47BDT/)

<div class="shadow-circle"></div> 

.shadow-circle{ 
    width:100px; 
    height:100px; 
    border-radius: 50%; 
    border: 6px solid red; 
    -moz-background-clip: content;  /* Firefox 3.6 */ 
    -webkit-background-clip: content; /* Safari 4? Chrome 6? */ 
    background-clip: content-box;  /* Firefox 4, Safari 5, Opera 10, IE 9 */ 
} 

Я хочу добавить 1px синюю рамку вокруг круга (также круговая граница). Как мне это сделать? Решение должно работать в IE8.

Answer 1

Вы можете использовать box-shadow, чтобы добавить дополнительную границу по кругу. Кроме того, border-radius даже не будет работать в IE8, так как он isn't supported. Вам понадобится полиполк, если вы хотите получить поддержку через старые, устаревшие браузеры.

jsFidle example

CSS

.shadow-circle{ 
    width:100px; 
    height:100px; 
    border: 6px solid red; 
    box-shadow: 0px 0px 0px 10px blue; 
    border-radius: 50%; 
} 

Кроме того, box-shadowisn't supported by IE8 either.

Answer 2

Я думаю, что путь JoshC является, вероятно, лучше, но другой способ заключается в использовании псевдо-элемент:

.shadow-circle:after { 
    content: ' '; 
    border-radius: 50%; 
    border: 6px solid blue; 
    width: 110px; 
    height: 110px; 
    display: block; 
    position: relative; 
    top: -10px; 
    left: -10px; 
} 

Вот the demo.

Answer 3

Добавить box-shadow. Оставьте размытие на 0 (третья часть имущества), установив спред до 1px.

.shadow-circle{ 
    width:100px; 
    height:100px; 
    border-radius: 50%; 
    border: 6px solid red; 
    box-shadow: 0 0 0 1px blue; 
} 

Answer 4

Если вы видите это сообщение Box shadow in IE7 and IE8

Вы можете найти этот ответ, который вы можете найти полезным:

Использование CSS3 PIE, который эмулирует некоторые свойства CSS3 в более старых версиях IE ,

Он поддерживает тень (кроме ключевого слова вставки).