定义和用法
边框半径属性是设置四个边框的简写属性 - * - 半径属性。
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