你能在html5的图标周围放一个白色的圆圈边框吗?

Question

我一直在网上搜索一段时间寻找一种方法，把一个图标在一个白色的边框圆圈透明的背景，

有人有意见吗?这是可行的吗?

想一下

     <Code for circle> <i class="glyphicon glyphicon-plus"></i> </circle end>

顺便说一句，它需要在移动浏览器中工作。谢谢大家的宝贵时间!

Answer 1

您可以使用border和border-radius的CSS属性:

CSS:

.rounded-icon {
    border: 3px solid #fff;
    display: inline-block;
    border-radius: 26px;
    width: 26px;
    height: 26px;
    text-align: center;
}

HTML:

<div class="rounded-icon"><i class="glyphicon glyphicon-plus"></i> </div>

jsFiddle演示

Answer 2

假设你的圆形图标在div中，类为"icon"。我建议在CSS中使用一个非常大的边框半径来模拟一个圆圈，并简单地添加一个白色边框，比如2px宽:

.icon {
    -moz-border-radius: 999px;
    -webkit-border-radius: 999px;
    -khtml-border-radius: 999px;
    border-radius: 999px;
    border: 2px solid #fff
}

如果你也想在IE8中工作，你可能也想参考使用PIE，在这里:http://css3pie.com/