IT兄弟連 HTML5教程 CSS3屬性特效 圓角

• 2019 年 11 月 26 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103175877

傳統的圓角生成方案，必須使用多張圖片作為背景圖案。CSS3的出現，使得我們再也不必浪費時間去製作這些圖片了，只需要border-radius屬性，支援瀏覽器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4。

1 border-radius屬性

CSS3圓角只需設置一個屬性：border-radius（含義是"邊框半徑"）。為這個屬性提供一個值，就能同時設置四個圓角的半徑。所有合法的CSS度量值都可以使用：em、px、百分比等等。比如,下面是一個div方框（寬高都是200px，背景為墨綠色，邊框為2px的灰色實線），程式碼如下：

實現的效果如圖1所示：

圖1 box最初樣式

現在來為它設置50%的圓角，為css增加border-radius: 50%，CSS程式碼如下：

這裡通過為圓角屬性值設置為50%，也就是，同時將每個圓角的"水平半徑"和"垂直半徑"都設置為50%，最後實現一個圓形。如圖2所示：

圖2 為box設定四角都為50%的圓角

border-radius可以同時設置1到4個值。（想想我們之前的margin與padding）如果設置1個值，表示4個圓角都使用這個值。如果設置兩個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。如果設置三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。如果設置四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。

現在我們來為box的border-radius屬性設置兩個值border-radius: 50px 25px，來看看它的實現效果，CSS程式碼如下：

實現的圓角效果，將box的左上角和右下角的圓角半徑設為50px，右上角和左下角圓角半徑設為25px。如圖3所示：

圖3 為box的border-radius設置兩個值

再來為box的border-radius屬性設置三個值border-radius: 50px 10px 25px，來看看它的實現效果，CSS程式碼如下：

實現的圓角效果，將box的左上角的圓角半徑設為50px，右上角和左下角的圓角半徑設為10px，右下角圓角半徑設為25px。如圖4所示：

圖4 為box的border-radius設置三個值

最後我們為box的border-radius屬性設置四個值border-radius: 50px 10px 25px 0，來看看它的實現效果，CSS程式碼如下：

實現的圓角效果，將box的左上角的圓角半徑設為50px，右上角的圓角半徑設為10px，左下角的圓角半徑設為25px，右下角圓角半徑設為0。如圖5所示：

圖5 為box的border-radius設置四個值

2 單個圓角的設置

除了同時設置四個圓角以外，還可以單獨對每個角進行設置。對應四個角，CSS3提供四個單獨的屬性：

（1）border-top-left-radius

（2）border-top-right-radius

（3）border-bottom-right-radius

（4）border-bottom-left-radius

這四個屬性都可以同時設置1到2個值。如果設置1個值，表示水平半徑與垂直半徑相等。如果設置2個值，第一個值表示水平半徑，第二個值表示垂直半徑。

現在，我們為單獨為box的左上角設定50px的圓角，來看看它的實現效果，CSS程式碼如下：

實現的圓角效果，將box的左上角的圓角半徑設為50px。如圖6所示：

圖6 為box設置左上角的圓角

雖然各大瀏覽器都支援border-radius，但是在某些細節上，實現都不一樣。當四個角的顏色、寬度、風格（實線框、虛線框等）、單位都相同時，所有瀏覽器的渲染結果基本一致；一旦四個角的設置不相同，就會出現很大的差異。另外，並非所有瀏覽器，都支援將圓角半徑設為一個百分比值。

因此，目前最安全的做法，就是將每個圓角邊框的風格和寬度，都設為一樣的值，並且避免使用百分比值。