css3 学习--圆角(border-radius)

最新推荐文章于 2025-06-06 17:44:22 发布

weixin_30348519

最新推荐文章于 2025-06-06 17:44:22 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/juhntao/archive/2012/04/30/2477076.html

本文深入探讨了CSS3中border-radius属性的使用方法，包括语法、写法、效果展示以及如何兼容Firefox浏览器。通过具体示例，帮助开发者轻松实现元素的圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

border-radius 即圆角。

在css2中做圆角是很痛苦的。我们往往都是用图片来做圆角的。

而在css3中圆角是非常简单的只需要一句简单的代码就好了，看例子。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <style type="text/css"> 
 5 div
 6 {
 7 border:2px solid #a1a1a1;
 8 padding:10px 40px; 
 9 background:#dddddd;
10 width:300px;
11 border-radius:119px;
12 -moz-border-radius:25px; /* 是为了兼容FF */
13 }
14 </style>
15 </head>
16 <body>
17 
18 <div>The border-radius property allows you to add rounded corners to elements.</div>
19 
20 </body>
21 </html>

语法

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

例如

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

其中 “/” 左边的表示的是x轴，右边的表示y轴，没有 “/” 的表示x轴和y轴相等，可能我的说法并不是太准确

还有一种写法

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

其中第一个*取值有top和bottom，第二个*取值有left和right

例如

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

效果如下图

border-radius-diagram-1

若要兼容FF可能需要修改一下,见下表

W3C Specification	Mozilla Implementation
border-radius	-moz-border-radius
border-top-left-radius	-moz-border-radius-topleft
border-top-right-radius	-moz-border-radius-topright
border-bottom-right-radius	-moz-border-radius-bottomright
border-bottom-left-radius	-moz-border-radius-bottomleft