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

Question

我需要在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

Answer 1

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

引用此文章： CSS圆，带有两个不同颜色的边框或至少看起来像

工作样本：

 .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> 

Answer 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/上看到这一点。

Answer 3

您可以为此使用outline 。

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

那样就可以了。 :)

Answer 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;
}

小提琴

当然，您可以播放大小和字体颜色等。

Answer 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来使文本垂直居中。）

Answer 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;

}}