创建具有多个边框的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>