又來寫自己不擅長的東西了，這次是 CSS3 的 border-radius。
CSS3 的 border-radius 可以做出圓角效果，可是上下左右各角的參數順序是什麼，如果沒 K 過相關文件，還真的很難猜。（考試會考喔！）
先看這個範例：
用記事本儲存成一個 .html 檔案，就可以直接用瀏覽器開啟。結果如下圖：
[規則 1] 使用 border-radius 時，各角的弧形半徑參數是依順時針的順序來指定的：左上、右上、右下、左下。
在剛才的範例中，四個角都有指定：
但並非全部參數都要指定；若後面的參數沒有指定，就會用前面的參數套進去。但是這個「前面」也是有規則的：
[規則 2]
若右下沒有指定，就沿用左上的設定，若左下未指定，則與右上同。簡單的說，就是沿用對角啦。如果右上沒有指定呢？那就使用左上角的設定。
注意 (D) 和 (E) 這兩個範例都有用到斜線字元 "/"，這就帶出另一條規則：
[規則 3]有 "/" 字元，就表示產生弧形的寬和高要分開指定。"/" 左邊的是各角的寬，右邊則是各角的高。寬與高無須成對出現，沒有設定的部分，則按照 [規則1] 的方式套用先前的值。但是要注意這個「先前」是指高度的部分，不是用某個角先前指定的寬度去套用其高度。
所以你可以看到範例 (E) 並沒有指定右下角弧形的高度，那麼它是套用先前的哪一個設定值呢？如 [規則 3] 所述，它是套用「先前」的「高度」，也就是 [規則 2] 所說的對角的那個高度，亦即左上角的高度：20px。至於左上角有指定弧形高度 20 點，為什麼結果沒有出現弧形，這應該就不用解釋啦。
關於圓角弧形的寬與高（半徑），W3C 網站上有更清楚的圖可參考，點我開啟。
另外還有 border-*-*-radius 的語法，可以個別指定各角的弧形參數。例如：
border-left-top-radius: 5px 10px;
其他用法請參閱 W3C 網站。
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 範例與輸出結果 |
[規則 3]有 "/" 字元，就表示產生弧形的寬和高要分開指定。"/" 左邊的是各角的寬，右邊則是各角的高。寬與高無須成對出現，沒有設定的部分，則按照 [規則1] 的方式套用先前的值。但是要注意這個「先前」是指高度的部分，不是用某個角先前指定的寬度去套用其高度。
所以你可以看到範例 (E) 並沒有指定右下角弧形的高度，那麼它是套用先前的哪一個設定值呢？如 [規則 3] 所述，它是套用「先前」的「高度」，也就是 [規則 2] 所說的對角的那個高度，亦即左上角的高度：20px。至於左上角有指定弧形高度 20 點，為什麼結果沒有出現弧形，這應該就不用解釋啦。
關於圓角弧形的寬與高（半徑），W3C 網站上有更清楚的圖可參考，點我開啟。
另外還有 border-*-*-radius 的語法，可以個別指定各角的弧形參數。例如：
border-left-top-radius: 5px 10px;
其他用法請參閱 W3C 網站。
沒有留言: