< p>CSS怎么把框變成圓角< /p>< p>學(xué)習(xí)CSS時(shí)，經(jīng)常會(huì)遇到需要將元素的邊框變成圓角的情況。本篇文章將介紹如何使用CSS將框變成圓角。< /p>< p>首先，我們需要使用border-radius屬性。這個(gè)屬性接受一組值，分別表示四個(gè)角的半徑，可以使用像素(px)、百分比(%)、em作為單位。例如< /p>

border-radius: 10px;

< p>這將把元素的四個(gè)角變成10像素的圓角。如果我們只想給左上角和右下角加上圓角，可以使用下面的代碼：< /p>

border-radius: 20px 0 0 20px;

< p>這會(huì)將元素的左上角和右下角分別變成20像素的圓角，而左下角和右上角則不變。這里的四個(gè)值分別對(duì)應(yīng)左上、右上、右下、左下四個(gè)角，值的順序是順時(shí)針的。< /p>< p>對(duì)于圓形的元素（例如圓形圖標(biāo)），我們可以將border-radius屬性的值設(shè)置為50%。例如：< /p>

border-radius: 50%;

< p>這會(huì)將元素變成一個(gè)圓形。當(dāng)然，這只適用于寬度和高度相等的元素，否則就會(huì)變成一個(gè)橢圓形。< /p>< p>至此，介紹完畢。使用CSS的border-radius屬性可以讓我們方便地將元素的邊框變成圓角，使網(wǎng)頁(yè)更加美觀。< /p>