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-shadow isn'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。

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

如何在CSS圈子周围添加第二个边框

4 个答案: