CSS: 填充字形的准确背景

Question

我尝试填充圆形字形的确切背景：所以这个

看起来像那个

只有 css 并且我希望边框是任何颜色，我对轮廓的尝试没有成功。由于颜色不灵活，边框阴影不能成为一个选项。

请同时声明您的解决方案支持的浏览器。

这里 fiddle 开始： http://jsfiddle.net/aQrPd/145/

.custom {
    margin-left:10px;
    background-color:white;
    border-radius: 50%;
    padding: 4px 3px 0 3px;
    border: 3px #ccc solid;
}
.c2 {
    background:black;   
}

Answer 1

你可以使用 box-shadow.

Browser Support for box-shadow

div {
  width: 30px;
  height: 30px;
  background: black;
  margin: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px white,
    0 0 0 10px #CBCBCB;
}

<div></div>

Answer 2

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
 .custom {
  margin-left: 10px;
  background-color: white;
  border-radius: 50%;
  padding: 4px 3px 0 3px;
  border: 3px #ccc solid;
}
.custom:before {
  content: '';
  display: inline-block;
  border-radius: 100%;
  background: #000;
  height: 14px;
  width: 14px;
}

<br />
<br />

<span class="custom glyphicon glyphicon-ok-circle"></span>

<br />
<br />

<img src="http://fs2.directupload.net/images/150101/gxdavpdq.png" />

CSS: 填充字形的准确背景

CSS: Fill exact background of glyphicon

css

twitter-bootstrap

glyphicons