在網(wǎng)頁設(shè)計中，為了美化頁面，我們經(jīng)常會使用圓角效果。而在CSS中，我們可以通過border-radius屬性來實(shí)現(xiàn)元素的圓角、橢圓角或者半圓角等效果。下面我們來詳細(xì)了解一下border-radius的用法。

/* 語法 */
border-radius: value;
/* 示例 */
border-radius: 10px;
border-radius: 50%;
border-radius: 20px 50px;
border-radius: 10px 30px 50px 70px;

border-radius屬性的值可以為一個或多個數(shù)值/百分比，用空格隔開。如果只有一個值，那么所有的圓角都將是相同的大小。如果有兩個值，第一個值指定水平方向上的圓角大小，第二個值指定垂直方向上的圓角大小。如果有四個值，分別對應(yīng)左上、右上、右下、左下四個方向的圓角大小。

我們來看一個示例：

.box {
width: 200px;
height: 100px;
border: 2px solid #333;
border-radius: 20px;
}

上面的CSS代碼實(shí)現(xiàn)了一個border-radius為20px的圓角效果。需要注意的是，圓角的大小不能超過元素寬度/高度的一半，否則不會產(chǎn)生效果。

如果我們需要實(shí)現(xiàn)不同的圓角大小，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius這四個屬性分別指定每個圓角的大小。

下面是一個綜合示例：

.box {
width: 200px;
height: 100px;
border: 2px solid #333;
border-top-left-radius: 30px;
border-top-right-radius: 50%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 20px;
}

通過上面的介紹，我們相信大家已經(jīng)掌握了CSS中border-radius屬性的用法，可以輕松實(shí)現(xiàn)頁面圓角效果了。