定義和用法
邊框半徑屬性是設置四個邊框的簡寫屬性 - * - 半徑屬性。
Tip:這個屬性可以讓你圓潤的邊框添加元素!
默認值: | 0 |
---|---|
遺傳: | no |
動畫: | yes. Read about animatable Try it |
版: | CSS3 |
JavaScript語法: | object .style.borderRadius="25px" Try it |
瀏覽器支持
在表中的數字規定,完全支持該屬性的第一個瀏覽器版本。
其次是-webkit-號碼或-moz-指定用一個前綴工作的第一個版本。
屬性 | |||||
---|---|---|---|---|---|
border-radius | 5 4.0 -webkit- | 9 | 4 3.0 -moz- | 5 3.1 -webkit- | 10.5 |
CSS語法
border-radius:1-4 length|%/1-4 length|%|initial|inherit;
Note:每個半徑的四個值的順序左上,右上,右下,左下中給出。 如果省略左下它是相同的右上角。 如果省略右下角它是相同的左上角。 如果省略右上方它是相同的左上角。
屬性值
值 | 描述 | 播放 |
---|---|---|
length | 限定了角部的形狀。 默認值為0 | 播放 ” |
% | 定義%彎道的形狀 | 播放 ” |
initial | 將此屬性設置為默認值。 閱讀關於初始 | 播放 ” |
inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
例1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
例2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
相關頁面
CSS3教程: CSS3邊框
HTML DOM參考: borderRadius property