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

Question

我有以下CSS样式可以创建一个红色的圆形（JSFiddle链接：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 */
}

我想在圆形周围添加一个1像素的蓝色边框（也是圆形边框）。我该怎么做？解决方案需要在IE8中工作。

- alias51

---

由于IE8不支持border-radius，因此该解决方案无法在IE8中运行。 - Jezen Thomas

Answer 1

你可以使用box-shadow在圆形周围添加一个次要边框。除此之外，border-radius在IE8中甚至不起作用，因为它不被支持。如果想在旧的、过时的浏览器上获得支持，就需要使用polyfill。

jsFidle示例

CSS

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

此外，box-shadow 也不被IE8支持。

- Josh Crozier

---

如果你感到特别迷幻，可以使用multiple borders。 - Moob

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

这是一个演示，具体内容请查看此链接。

- Jezen Thomas

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

- matewka

Answer 4

如果你看到这篇帖子 在IE7和IE8中使用盒子阴影

你可以找到下面这个回答，它可能会对你有用：

使用CSS3 PIE，在旧版本的IE中模拟一些CSS3属性。

它支持box-shadow（除了inset关键字）。

- leoledmag