CSS：填充字形图标的确切背景答案

【问题标题】：CSS: Fill exact background of glyphiconCSS：填充字形图标的确切背景
【发布时间】：2015-02-28 07:24:17
【问题描述】：

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

看起来像那个

仅使用 css 并且我希望边框是任何颜色，但我对轮廓的尝试没有成功。由于颜色不灵活，无法选择边框阴影。

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

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

【问题讨论】：

我不认为你可以通过设置背景颜色来实现这一点，因为如果你注意到复选框背景超出了它的边界..

标签： css twitter-bootstrap glyphicons

【解决方案1】：

@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" />

【讨论】：

浏览器支持：caniuse.com/#search=%3Abefore。天才，为什么不多点赞？？？！

【解决方案2】：

你可以使用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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

就像在我的问题中明确指出的那样，使用阴影是不可能的，因为它不允许颜色的灵活性。确实感谢
什么意思？你可以给阴影任何颜色，对吧？您是否尝试过将white 和#CBCBCB 更改为green 和blue？
很遗憾，这可能是您唯一的选择。 And shadows kind of have colors.