CSS3 的 border-radius 圓角效果

又來寫自己不擅長的東西了,這次是 CSS3 的 border-radius。

CSS3 的 border-radius 可以做出圓角效果,可是上下左右各角的參數順序是什麼,如果沒 K 過相關文件,還真的很難猜。(考試會考喔!)

先看這個範例:

<!DOCTYPE html>
<head>
    <title></title>
    <style type="text/css" >
        #box {
            width: 150px;
            height: 60px;
            border-width: 3px;
            border-color: black;
            border-style: solid;
            background-color: #24398d;
            
            border-radius: 0px 10px 30px 50px;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
</body>
</html>

用記事本儲存成一個 .html 檔案,就可以直接用瀏覽器開啟。結果如下圖:



[規則 1] 使用 border-radius 時,各角的弧形半徑參數是依順時針的順序來指定的:左上、右上、右下、左下。

在剛才的範例中,四個角都有指定:

border-radius: 0px 10px 30px 50px;

但並非全部參數都要指定;若後面的參數沒有指定,就會用前面的參數套進去。但是這個「前面」也是有規則的:

[規則 2]
若右下沒有指定,就沿用左上的設定,若左下未指定,則與右上同。簡單的說,就是沿用對角啦。如果右上沒有指定呢?那就使用左上角的設定。


下圖是更多例子:

border-radius 範例與輸出結果

注意 (D) 和 (E) 這兩個範例都有用到斜線字元 "/",這就帶出另一條規則:

[規則 3]有 "/" 字元,就表示產生弧形的寬和高要分開指定。"/" 左邊的是各角的寬,右邊則是各角的高。寬與高無須成對出現,沒有設定的部分,則按照 [規則1] 的方式套用先前的值。但是要注意這個「先前」是指高度的部分,不是用某個角先前指定的寬度去套用其高度。

所以你可以看到範例 (E) 並沒有指定右下角弧形的高度,那麼它是套用先前的哪一個設定值呢?如 [規則 3] 所述,它是套用「先前」的「高度」,也就是 [規則 2] 所說的對角的那個高度,亦即左上角的高度:20px。至於左上角有指定弧形高度 20 點,為什麼結果沒有出現弧形,這應該就不用解釋啦。

關於圓角弧形的寬與高(半徑),W3C 網站上有更清楚的圖可參考,點我開啟

另外還有 border-*-*-radius 的語法,可以個別指定各角的弧形參數。例如:

border-left-top-radius: 5px 10px;

其他用法請參閱 W3C 網站

沒有留言:

技術提供:Blogger.
回頂端⬆️