在CSS中，我們可以使用border-radius屬性將元素的邊界呈現(xiàn)成圓角邊框。border-radius屬性可以接受1到4個值，每個值都會按照上、右、下、左的順序依次應(yīng)用于圓角，并且還可以使用/inset關(guān)鍵字來指定內(nèi)部圓角邊框。

/* 設(shè)置四個圓角的值 */
border-radius: 10px 20px 30px 40px;
/* 設(shè)置水平圓角的值 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
/* 設(shè)置內(nèi)部圓角邊框 */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;
border-radius: 10px / 5px;

除了基本的圓角邊框形狀，CSS還提供了一些更高級的圓角特效，例如環(huán)形邊框、半圓形邊框和球形邊框。

/* 環(huán)形邊框 */
border: 10px solid #f00;
border-radius: 50%;
width: 200px;
height: 200px;
/* 半圓形邊框 */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom: 2px solid #f00;
width: 200px;
height: 100px;
/* 球形邊框 */
border-radius: 50%;
width: 200px;
height: 200px;
/* 設(shè)置陰影效果 */
box-shadow:
inset 0 0 0 30px #fff,
/* 內(nèi)部白色邊距 */
0 0 20px rgba(0, 0, 0, 0.5);
/* 外部黑色陰影 */

掌握CSS圓弧邊框，可以使我們在設(shè)計(jì)網(wǎng)頁時事半功倍，讓我們的網(wǎng)頁更加美觀精致。