创建具有多个边框的 CSS 徽章答案

【问题标题】：create a css badge with multiple borders创建具有多个边框的 CSS 徽章
【发布时间】：2017-01-12 22:21:27
【问题描述】：

我需要在 css 中复制这个：

到目前为止，我已经有了基础：

<span>&lt; HTML &gt;</span>

CSS：

span {
  display:table-cell;
  vertical-align:middle;
  background-color:#266c30;
  width:200px;
  height:200px;
  text-align:center;
  border-radius:50%;
  color:white;
  font-size:30px;
  font-family:Arial, sans-serif;
  letter-spacing:1px;
}

见我的codepen

【问题讨论】：

标签： html css

【解决方案1】：

更新代码笔：http://codepen.io/anon/pen/oLGDl

引用此帖：CSS circle with two borders of different colors or at least looks like

工作示例：

.circle_container {
    width: 80px;
    height: 80px;
    border-radius: 42px;
    border: 3px solid #fff;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 80px;
    text-align: center;
    background: #266c30;
    box-shadow: 0 0 0 3px #266c30; 
}

<div class="circle_container">
<span>HTML</span>
</div>

【讨论】：

【解决方案2】：

我会使用边框和 CSS 轮廓来实现：

border: 5px solid #fff;
-moz-box-shadow:    0 0 0 5px #266c30;
-webkit-box-shadow: 0 0 0 5px #266c30;
box-shadow:         0 0 0 5px #266c30;

当然，根据需要调整边框大小。您可以在 http://jsfiddle.net/NEP8u/ 看到这一点。

【讨论】：

您可以在 ie8 及以下版本中使用轮廓，因为边框半径和框阴影不起作用，因此如果您想要为旧版浏览器使用双边框的正方形，请使用 ie 特定类并添加轮廓跨度>

【解决方案3】：

您可以为此使用outline。

在绿色元素周围创建3px 的白色边框，并为其应用绿色的7px 轮廓。

这样就可以了。 :)

【讨论】：

我不确定这是否可行，因为轮廓不符合边界半径？
Rob Morris 是正确的，刚刚尝试过 - 轮廓不尊重边界半径。

【解决方案4】：

试试这个：

html

<div class="inner container">
    <div class="inner">
        <span>HTML</span>
</div>
</div>

css

.inner{
    height: 100%;
    width: 100%;
    background: #FFF;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    padding: 5px;
    box-sizing: border-box;
    background:green;
    color: white;

    text-align:center;
}
.container {
    width: 100px;
    height: 100px;
    margin: 1%;
}

span{
    line-height:65px;
}

fiddle

当然你可以玩大小和字体颜色等。

【讨论】：

【解决方案5】：

我会简单地为白色内边框使用:after 生成的伪元素，如下所示：

span:after {
  content:"";
  position:absolute;
  top:5px;
  left:5px;
  right:5px;
  bottom:5px;
  border:2px solid #fff;
  border-radius:50%;
}

http://codepen.io/anon/pen/zAGqx

（我将跨度从display:table-cell 更改为block，因为在某些浏览器[尤其是Firefox] 中，相对于表格元素的绝对定位可能很棘手，并且使用line-height 代替垂直居中文本。）

【讨论】：

【解决方案6】：

HTML：

<span>&lt;html&gt;</span>

CSS：

span {
display:table-cell;
vertical-align:middle;
position: centre;
background-color:#266c30;
width:200px;
height:200px;
text-align:center;
border-radius:50%;
color:white;
font-size:60px;
font-family:Arial, sans-serif;
letter-spacing:1px;
border: 5px solid #fff;
-moz-box-shadow:    0 0 0 15px #266c30;
-webkit-box-shadow: 0 0 0 15px #266c30;
box-shadow:         0 0 0 15px #266c30;

} }

【讨论】：