【筆記】使用CSS做圓形數字牌子

今天在某個網頁中，看到了類似平常在電視上用來給分的顏色牌子，來做為分步驟的指示，覺得很有趣，就把它記下來，做一點改變如下：

10



它的HTML程式碼如下：

10

主要是利用CSS的border-radius屬性來做圓形的變化，如下列程式的第4、5、6行。

再利用padding屬性來調數字的位置，如下列程式的第13、14、15行：

span.circle{
 font-family:Courier, Arial;
 font-size: 36px;
 -webkit-border-radius: 40px;
 -moz-border-radius: 40px;
 border-radius: 40px;
 background-color: #0055d4;
 border: 3px solid #0055d4;
 color: #fff;
 display: block;
 float: left;
 height: 38px;
 padding: 7px 8px 13px 8px;
 text-align: center;
 vertical-align: top;
 width: 44px;
}

上列會分別設-webkit-border-radius、-moz-border-radius、border-radius是針對不同瀏覽器做的圓角設定，可以參考MDN的說明。