CSS3 是一種強大的樣式語言,它可以讓我們在網頁中實現各種復雜的效果,比如畫圈。
.circle { width: 150px; height: 150px; border-radius: 50%; background-color: #00bcd4; margin: 20px auto; text-align: center; color: #fff; font-size: 30px; line-height: 150px; }
上面的代碼演示了如何使用 CSS3 創建一個圓形,其中 border-radius 屬性可以用來設置圓的半徑,該屬性的值為 50%,相當于圓的半徑是盒子寬度和高度的一半。而 background-color 屬性用來設置圓的背景顏色,這里設置了 #00bcd4,是一種綠松石色。text-align 屬性用來讓圓形中的文本居中顯示,color 屬性用來設置文本顏色,這里設置為白色。font-size 屬性用來設置文本字體大小,line-height 屬性用來設置行高,這里將行高設置為盒子高度,使得文本垂直居中顯示。
需要注意的是,border-radius
屬性不僅可以用來畫圓,還可以用來畫其他形狀,比如矩形的圓角、橢圓、三角形等。另外,CSS3 還有很多其它的屬性和值可以用來制作各種各樣的效果,如動畫、過渡、陰影、漸變等,可以不斷地發掘。