[CSS3]用純CSS語法畫一個正圓形

現在很多的網站,
都很流行採用純CSS語法來設計樣式,
特別是以往要用圖片來製作的,現在透過CSS3的標準語法,
也可以取代一部分圖片使用。
像是最常見的圓形或是箭頭等等...
 
有朋友問如何用純CSS的語法,來畫一個正圓形呢?
 
方法很簡單:
先決定你的圓形要多大(寬與高),
在這裡我先以80px為直徑,做一個黑色的正圓形,
那麼這個圓形的CSS3語法如下:
div.circle_in_black{
width:80px;height:80px; //正圓形,所以寬與高都設一樣
border-radius:99em;
background-color:black;
}

上面的語法看起來會是這樣:
 

 
這個語法只有兩個關鍵,
一個是圓的直徑,你要先設好(寬與高都要一樣)。
 
另一個關鍵語法就是:border-radius。
 
這個 border-radius 的語法,
原本是用來設定區塊四邊的圓角,
當我們把他的數值設到 99em 之後,
他就會自動變成一個正圓囉!
 
而且不管你的圓形直徑有多大或多小,
只要設定成 99em 都會自動隨著直徑調整,
讓你的圓形維持著正圓形狀喔!
 
就是這麼簡單吧 ^^

Readers comment