创建具有多个边框的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 with two borders of different colors or at least looks like

工作样本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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绿色轮廓。

那就行了。 ：）

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

fiddle

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

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;

} }