創建具有多個邊框的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;

}}