css如何設定邊框的圓角樣式？ border-radius屬性設定圓角樣式（圖 文）
- 青灯夜游原創
- 2018-09-18 15:03:1114539瀏覽
很多時候在開發網頁前端的時候，為了讓網頁上面的東西看起來更加的舒服，我們可能需要設定一些圓角的效果，例如圓形的頭像、圓角的 按鈕等等。那麼這些圓角效果是如何用css樣式實現的，本章就跟大家介紹css如何設定邊框的圓角樣式？ border-radius屬性設定邊框的樣式（圖 文）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
在css樣式中有一個屬性：border-radius屬性是就常見 ，也是最簡單、快速設定圓角效果的屬性；border-radius（意義是"邊框半徑"），只需要給border-radius 提供值，就能設定邊框圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等都可以。
border-radius包含5種設定圓角樣式方式：
border-radius ：同時設定4個邊框的圓角樣式。
border-top-left-radius ：設定左上角邊框的圓角樣式。
border-top-right-radius ：設定右上角邊框的圓角樣式。
border-bottom-left-radius ：設定左下角邊框的圓角樣式。
border-bottom-right-radius ：設定右下角邊框的圓角樣式。
圖片範例（設定四個邊框圓角值為20px）：
#border-radius的參數說明：
border-radius可以一次對四個角設定相同的值，也可以對4個角分別設定圓角樣式。而秘訣就在於設定border-radius的參數個數，border-radius的參數個數範圍為1~4個。
下面分別說明參數1~4個所代表的意義：
1. 當參數個數為：1
說明：4個邊框的圓角樣式都採用這個設定。
範例：
border-radius：20px;/*4个边框圆角样式都为20px*/
2.當參數個數為：2
##說明：第1參數：左上角和右下角邊框的圓角樣式。 第2參數：右上角和左下角邊框的圓角樣式。 範例：
border-radius：20px 10px;/*左上角和右下角：20px；右上角和左下角：10px*/
3. 當參數數量為：3
說明：第1參數：左上角邊框的圓角樣式。 第2參數：右上角和左下角邊框的圓角樣式。 第3參數：右下角邊框的圓角樣式。 範例：
border-radius：20px 10px 40px;/*左上角：20px；右上角和左下角：10px；右下角：40px*/
4.當參數個數為：4
border-radius：20px 10px 50px 30px;/*左上角：20px；右上角：10px；右下角：50px；左下角：30px*/
border-top-left-radius ：20px。 border-top-right-radius ：10px。 border-bottom-left-radius ：30px。 border-bottom-right-radius ：50px。只是這樣設定太過於繁瑣，不利於優化了css檔案程式碼。
圓形邊框（實例介紹）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 100px;
height: 100px;
border: 1px solid salmon;
background-color: salmon;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>只要把border-radius裡的值設為100%，就可以得到這樣的一個圓形邊框。圓形邊框可以用在使用者的頭像展示等等方法。 效果圖：
以上是css如何設定邊框的圓角樣式？ border-radius屬性設定圓角樣式（圖 文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！