第二章：第四课 css 3.0属性border-radius设置边框圆角

       在以往，我们要使用一个圆角的矩形框，一般是需要图片处理软件生成图片，在web页面中设置改图为背景，在CSS 3.0中，有个很方便的属性：border-radius，它主要的功能是设置边框的圆角，border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 有类似的功效，只不过是分别设置各边。-moz-border-radius和-webkit-border-radius实现的是一样的效果，只是针对不同引擎的浏览器，一般情况下，你只设置了border-radius，Firefox就可以显示效果，如下例子，mark只用了border-radius。

此属性支持safari3.1、Firefox 3.5、Chrome 1.0.x以上,Opera和IE（6、7、8）都不支持。

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajava.org CSS 3.0属性border-radius例子</title>
</head>
<body>
     <div >在Firefox和Safari 3的浏览器里能看到圆角效果</div>
<br>
     <div >border-radius: 120px圆角效果</div>
<br>
     <div >border-radius: 120px 0px圆角效果</div>
<br>
     <div >border-radius: 0px 120px圆角效果</div>
<br>
     <div >border-radius: 0px 120px 120px圆角效果</div>
<br>
     <div >border-radius: 120px 0px 120px圆角效果</div>
<br>
     <div >border-radius: 120px 0px 120px圆角效果</div>
<br>
     <div >border-radius: 0px 120px 120px 120px圆角效果</div>
<br>
     <div >border-radius: 120px 0px 120px 120px圆角效果</div>
<br>
     <div >border-radius: 120px 120px 0px 120px圆角效果</div>
<br>
     <div >border-radius: 120px 120px 120px 0px圆角效果</div>
<br>
</body>
</html>

效果如下图：


 

border-radius的值必须是由浮点数字和单位标识符组成的长度值。不可为负值。任意一个值为0，则这个角是矩形，不会是圆的。

posted @ 2012-03-10 23:03  YouDoce  阅读(504)  评论(0)  编辑  收藏  举报