Amazon Ads

2014年4月2日 星期三

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

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

10



它的HTML程式碼如下:
10
主要是利用CSSborder-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-radiusborder-radius是針對不同瀏覽器做的圓角設定,可以參考MDN說明