border-radius属性的具体用法如下:
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
默认值:0
继承性:no
版本:CSS3
JavaScript 语法:object.style.borderRadius="5px"
语法
border-radius: 1-4 length|% / 1-4 length|%
(注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。)
值 描述 测试
length定义圆角的形状。测试
%以百分比定义圆角的形状。测试
例子 1
border-radius:2em
等价于:
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
等价于:
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
上面这位兄台你的回答是COPY的吧,没有讲到重点不说,洋洋散散那么多字都是多余的,我给你写一句简单的代码。CSS代码:
<style>
#myDiv {
border-radius: 4px /*这句就是重点,让边框变为圆角*/
border: 1px solid #CCC/*让边框变为1px宽度,直线,#CCC颜色*/
width: 500px
height: 500px
}
</sytle>
HTML代码:
<div id="myDiv">这是圆角矩形</div>
就是这么简单,你COPY过去就OK了。
另外说一句,这个圆角的属性是CSS3中的特性,在IE9以下以及非webkit和moz内核的浏览器下都是不行的(比如IE8、IE7、IE6),这些浏览器就只能使用图片达到圆角效果了。
纯手工制造,希望对你有帮助,有任何疑问可以继续追问。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)