html - 如何在 CSS 圆周围添加第二个边框

Question

我有以下创建红色圆圈的 CSS(此处为 JS fiddle: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 .如果您想获得对旧的、过时的浏览器的支持，您将需要一个 polyfill。

jsFidle example

CSS

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

此外，box-shadow isn't supported by IE8 either .