如何在 CSS 圆圈周围添加第二个边框答案

【问题标题】：How to add a second border around a CSS circle如何在 CSS 圆圈周围添加第二个边框
【发布时间】：2013-11-13 02:02:21
【问题描述】：

我有以下创建红色圆圈的 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 */
}

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

【问题讨论】：

解决方案在 IE8 中不起作用，因为border-radius 在 IE8 中不起作用。

标签： html css

【解决方案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-shadowisn't supported by IE8 either。

【讨论】：

或multiple borders，如果你感觉特别迷幻;)

【解决方案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。

【讨论】：

【解决方案3】：

添加box-shadow。在将 spread 设置为 1px 时，将模糊留在 0（属性的第三部分）。

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

【讨论】：

【解决方案4】：

如果你看到这个帖子Box shadow in IE7 and IE8

您可以找到此回复，您会发现它很有用：

使用 CSS3 PIE，它模拟旧版本的一些 CSS3 属性即。

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

【讨论】：