CSS3实现DIV圆角完整代码

最新推荐文章于 2025-07-26 12:39:21 发布

转载最新推荐文章于 2025-07-26 12:39:21 发布 · 327 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.mk2048.com/blog/blog_hjc12ij1h22j.html

收录于

前端

本文详细介绍如何使用CSS3的border-radius属性创建圆角的DIV元素。通过具体实例，展示兼容现代浏览器如Chrome、火狐及IE9以上的圆角效果。

本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9以上。IE6、7、8不支持。

在线预览效果：http://hovertree.com/texiao/css/4.htm

画圆型的例子：http://hovertree.com/h/bjae/css3circle.htm

实际应用：http://hovertree.com/texiao/jquerytree/3/

测试:http://hovertree.com/texiao/css/4b.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3实现DIV圆角 - CSS3教程 - 计划 - 博客园</title>
    <meta name="keywords" content="www.cnblogs.com/jihua"/>
    <style type="text/css"> #yuanjiao{
 font-family: Arial;
 border: 2px solid #379082;
 border-radius: 20px;
 padding: 30px 30px;
 width: 330px;
 }</style> 
</head>
<body>
<div id="yuanjiao">
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持。<br /><br />
博客园计划CSS3教程<br />jihua.cnblogs.com
</div>
</body>
</html>