html - 如何在 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

您可以使用 abox-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也不支持。

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

这是演示。

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

If you see this post Box shadow in IE7 and IE8

You can find this response, which you can find useful:

Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.

It supports box-shadow (except for the inset keyword).