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

最新推荐文章于 2023-11-27 11:01:34 发布

weixin_30648587

最新推荐文章于 2023-11-27 11:01:34 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/youdoce/archive/2012/03/10/2389629.html

版权

在以往，我们要使用一个圆角的矩形框，一般是需要图片处理软件生成图片，在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>