border-radius的用法

Posted on Edited on In Views: Disqus:

 

border-radius功能為將一個元素的四個直角轉變成圓角，可不用跟border搭配。

<!DOCTYPE html>
<html>
<head>
    <style>
        #rcorners1 {
            border-radius: 25px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners2 {
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            border-bottom-left-radius: 25px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners3 {
            border-radius: 5px 10px 20px 40px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <p id="rcorners1">Rounded corners!</p>
    <p id="rcorners2">Rounded corners!</p>
    <p id="rcorners3">Rounded corners!</p>
</body>
</html>

 

一、border-radius shorthand

border-radius:5px;表示四個角皆往內縮5px，

border-radius:5px 10px;表示上左與下右往內縮5px，上右與下左往內縮10px，

border-radius:5px 10px 20px;表示上左內縮5px，上右與下左往內縮10px，下右往內縮20px，

border-radius:5px 10px 20px 40px;表示上左內縮5px，上右內縮10px，下右往內縮20px，下左內縮40px(順時針)。

 

二、border-radius none shorthand

border-top-left-radius表示上左

border-top-right-radius表示上右

border-bottom-right-radius表示下右

border-bottom-left-radius表示下左

 

三、Elliptical

<!DOCTYPE html>
<html>
<head>
    <style>
        #rcorners7 {
            border-radius: 50px/15px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners8 {
            border-radius: 15px/50px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners9 {
            border-radius: 50%;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <p id="rcorners7"></p>
    <p id="rcorners8"></p>
    <p id="rcorners9"></p>
</body>
</html>

border-radius還有較特別用法如，

border-radius: 50px/15px;表示四個角X軸由各角圓點內縮50px，Y軸由各角圓點內縮15px。

border-radius: 50%;表示四個角各內縮元素寬高的50%。