CSS3圆角效果实例
使用css3实现圆角效果主要是用到了 border-radius 这个属性，这个是css 3.0中新增的一个属性。这里将 border-radius 的兼容性列举如下：
| 浏览器 | 支持性 |
|---|---|
| Firefox(2、3+) | √ |
| Google Chrome(1.0.154+…) | √ |
| Google Chrome(2.0.156+…) | √ |
| Safari(3.2.1+ windows) | √ |
| Internet Explorer(IE7, IE8) | × |
| Opera 9.6 | × |
border-radius 属性的值即圆半径的值。
因为浏览器引擎的原因，针对 firefox Safari和Chrome 这两种浏览器则有其特殊的写法，即 -moz-border-radius 和 -webkit-border-radius
-moz-border-radius 用于 Firefox
-webkit-border-radius 用于 Safari和Chrome
注意这三种形式的书写需要遵循一定的顺序的，顺序如下：
#radius {
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
border-radius 也可以像 border 属性那样分开写，即：
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
那么针对firefox Safari和Chrome 则加上相应的前缀（-moz- -webkit-）就是了。
下面演示一个简单的通过 css3 实现的圆角效果，首先贴下效果图：
下面是示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.phpernote.com/javascript-function/833.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3 圆角效果实例</title>
<style type="text/css">
#round {
padding:10px; width:200px; height:50px;
border: 5px solid #666;
background-color:#CCC;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
</style>
</head>
<body>
<div id="round">css3 圆角效果实例</div>
</body>
</html>
有牛人用这个实现了一个奥运五环的标志，喜欢的可以看看（注意请在支持 border-radius 属性的浏览器上面看效果）：
css3圆角实现奥运五环标志（效果图如下）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具