CSS圓角屬性（border-radius）

98701 閱讀 0 評(píng)論 0 點(diǎn)贊

在制作網(wǎng)頁(yè)的過程中，有時(shí)我們可能需要實(shí)現(xiàn)圓角的效果，以前的做法是通過切圖（將設(shè)計(jì)稿切成便于制作成頁(yè)面的圖片），使用多個(gè)背景圖像來實(shí)現(xiàn)圓角。在 CSS3 出現(xiàn)之后就不需要這么麻煩了，CSS3 中提供了一系列屬性來設(shè)置元素的圓角效果，如下所示：

border-top-left-radius	為元素左上角設(shè)置圓角效果
border-top-right-radius	為元素右上角設(shè)置圓角效果
border-bottom-right-radius	為元素右下角設(shè)置圓角效果
border-bottom-left-radius	為元素左下角設(shè)置圓角效果
border-radius	上面四個(gè)屬性的簡(jiǎn)寫形式，可以同時(shí)為元素的四個(gè)角設(shè)置圓角效果

上述函數(shù)的可選值如下表所示：

值	描述
length	通過數(shù)值加單位的形式定義圓角的形狀
percentage	以百分比的形式定義圓角的形狀

border-radius用來實(shí)現(xiàn)圓角邊框。

舉例：

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

運(yùn)行結(jié)果：

圓角邊框

但是如果我把border-radius設(shè)為150px，就會(huì)變成圓形邊框

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 150px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

運(yùn)行結(jié)果：

圓形邊框

為了方便，直接把border-radius設(shè)為50%也行。效果是一樣的。

但是如果想畫圓，則width和height必須要相等。

事實(shí)上，border-radius后可以接多個(gè)屬性值，像上面的一個(gè)屬性值則默認(rèn)四角都為該屬性值，若是四個(gè)屬性值顯然是與四角相對(duì)，這么個(gè)相對(duì)法呢？從左上角開始，順時(shí)針一一對(duì)應(yīng)。

舉例說明：

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 50px 0px 20px 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

運(yùn)行結(jié)果：

border-radius

舉例畫個(gè)雞蛋吧：

<html>
<head>
    <style>
        div {
            width: 80px;
            height: 100px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 40px 40px 40px 40px/60px 60px 40px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

運(yùn)行結(jié)果：