CSS中的圓形設(shè)置在實(shí)際開發(fā)中經(jīng)常用到，通過border-radius屬性可以實(shí)現(xiàn)不同大小和樣式的圓形效果。

.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}

以上代碼通過設(shè)置寬高相等，同時(shí)設(shè)置50%的border-radius屬性來實(shí)現(xiàn)一個(gè)半徑為50px的圓形。我們也可以通過border-radius的四個(gè)值來分別設(shè)置每個(gè)角的圓角大小。

.round{
width: 200px;
height: 100px;
border-radius: 20px 10px 30px 40px;
background-color: blue;
}

以上代碼通過分別設(shè)置左上、右上、右下、左下四個(gè)角的圓角大小達(dá)到了一個(gè)不規(guī)則的圓角矩形效果。

另外，border-radius屬性還可以與box-shadow屬性一起使用，實(shí)現(xiàn)不同種類的陰影效果。

.shadow{
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background-color: green;
}

以上代碼通過設(shè)置一個(gè)10px的陰影效果使得圓形對(duì)于背景的呈現(xiàn)更加立體。同時(shí)，我們可以通過設(shè)置inset關(guān)鍵字，實(shí)現(xiàn)內(nèi)陰影效果。

.inset{
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
background-color: orange;
}

以上代碼通過設(shè)置一個(gè)內(nèi)陰影效果使得圓形內(nèi)部產(chǎn)生了一個(gè)陰影的立體感。通過以上幾種方式，我們可以實(shí)現(xiàn)不同效果的圓形設(shè)計(jì)，使得頁面變得更加美觀，同時(shí)也提高了用戶的使用體驗(yàn)。