CSS3是網(wǎng)頁中不可或缺的一部分，因?yàn)樗梢詫?shí)現(xiàn)豐富的網(wǎng)頁效果和動(dòng)畫。下面我們來看一下如何使用CSS3編寫一個(gè)圓餅。
首先，我們需要一個(gè)div元素來作為容器。在CSS代碼中，使用border-radius屬性可以將一個(gè)方形元素變?yōu)閳A形。具體的實(shí)現(xiàn)代碼如下：
div {
width: 200px; 
height: 200px; 
background-color: #d3d3d3; 
border-radius: 50%; 
}
上述代碼將div元素變成一個(gè)200px的圓形，并且將背景顏色設(shè)置為灰色。接下來，我們需要在圓形中添加一個(gè)百分比，表示圓餅的比例。
.pie {
width: 200px; 
height: 200px; 
clip: rect(0, 100px, 200px, 0); 
border-radius: 50%; 
background-color: #ef233c; 
transform-origin: 50% 50%; 
transform: rotate(45deg); 
}
可以看到，我們?cè)谠械膁iv容器中增加了一個(gè)子元素pie，將其寬高設(shè)置為200px，并應(yīng)用圓角。clip屬性可以控制元素顯示所用的區(qū)域，這里我們將圓形剪裁一半，表示圓餅的一半。background-color設(shè)置為紅色，表示圓餅的比例。transform-origin和transform屬性會(huì)使元素旋轉(zhuǎn)45度，并以圓心為中心點(diǎn)進(jìn)行旋轉(zhuǎn)，從而實(shí)現(xiàn)圓餅的效果。
有了上述代碼，我們就實(shí)現(xiàn)了一個(gè)CSS3圓餅。