- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>圆角</title>
- <style type="text/css">
- <!--
- *{margin:0;padding:0;}
- body {
- font: 11px Arial, sans-serif;
- padding: 10px;
- color: #333;
- }
- a {text-decoration:none;}
- a:hover {text-decoration: underline;}
- li {list-style:none;}
- .fillet_top,
- .fillet_end {
- clear: both;
- height: 5px;
- overflow: hidden;
- background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/Rogues/EntryImages/20080819/fillet_bg.gif) right top;
- }
- .fillet_t_l,
- .fillet_e_l {
- width: 5px;
- height: 5px;
- overflow: hidden;
- background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/Rogues/EntryImages/20080819/fillet_bg.gif) left top;
- }
- .fillet_e_l {
- width: 5px;
- height: 5px;
- overflow: hidden;
- background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/Rogues/EntryImages/20080819/fillet_bg.gif) left 5px;
- }
- .fillet_end {
- background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/Rogues/EntryImages/20080819/fillet_bg.gif) right 5px;
- }
- .box {
- border-right: 1px solid #ccc;
- border-left: 1px solid #ccc;
- }
- .box h2 {
- height: 30px;
- font: bold 11px/30px Arial, sans-serif;
- margin: 0 10px;
- border-bottom: 1px dotted #ccc;
- }
- .box h2 span {
- float: left;
- }
- .box h2 a {
- font: 10px/30px Arial, sans-serif;
- float: right;
- color: #666;
- }
- .box_inside {
- padding: 10px;
- line-height: 1.5em;
- }
- .box_inside a {
- color: #666;
- }
- li {
- }
- #div_1,
- #div_2,
- #div_3,
- #div_4,
- #div_5,
- #div_6 {
- margin: 10px 0;
- }
- #div_1 {
- width: 980px;
- background: #f0f0f0;
- }
- #div_2 {
- width: 760px;
- background: #f3f3f3;
- }
- #div_3 {
- width: 490px;
- background: #f6f6f6;
- }
- #div_4 {
- width: 260px;
- background: #f9f9f9;
- }
- #div_5 {
- width: 210px;
- background: #fcfcfc;
- }
- #div_6 {
- width: 150px;
- background: #fff;
- }
- -->
- </style>
- </head>
- <body>
- <div id="div_1">
- <div class="fillet_top">
- <div class="fillet_t_l"></div>
- </div>
- <div class="box">
- <h2>
- <span>Length 980px</span>
- <a href="#">More...</a>
- </h2>
- <div class="box_inside">
- <ul>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- </ul>
- </div>
- </div>
- <div class="fillet_end">
- <div class="fillet_e_l"></div>
- </div>
- </div>
- <div id="div_2">
- <div class="fillet_top">
- <div class="fillet_t_l"></div>
- </div>
- <div class="box">
- <h2>
- <span>Length 760px</span>
- <a href="#">More...</a>
- </h2>
- <div class="box_inside">
- <ul>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- </ul>
- </div>
- </div>
- <div class="fillet_end">
- <div class="fillet_e_l"></div>
- </div>
- </div>
- <div id="div_3">
- <div class="fillet_top">
- <div class="fillet_t_l"></div>
- </div>
- <div class="box">
- <h2>
- <span>Length 490px</span>
- <a href="#">More...</a>
- </h2>
- <div class="box_inside">
- <ul>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- </ul>
- </div>
- </div>
- <div class="fillet_end">
- <div class="fillet_e_l"></div>
- </div>
- </div>
- <div id="div_4">
- <div class="fillet_top">
- <div class="fillet_t_l"></div>
- </div>
- <div class="box">
- <h2>
- <span>Length 260px</span>
- <a href="#">More...</a>
- </h2>
- <div class="box_inside">
- <ul>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- </ul>
- </div>
- </div>
- <div class="fillet_end">
- <div class="fillet_e_l"></div>
- </div>
- </div>
- <div id="div_5">
- <div class="fillet_top">
- <div class="fillet_t_l"></div>
- </div>
- <div class="box">
- <h2>
- <span>Length 210px</span>
- <a href="#">More...</a>
- </h2>
- <div class="box_inside">
- <ul>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- </ul>
- </div>
- </div>
- <div class="fillet_end">
- <div class="fillet_e_l"></div>
- </div>
- </div>
- <div id="div_6">
- <div class="fillet_top">
- <div class="fillet_t_l"></div>
- </div>
- <div class="box">
- <h2>
- <span>Length 100px</span>
- <a href="#">More...</a>
- </h2>
- <div class="box_inside">
- <ul>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- <li>全局圆角测试</li>
- </ul>
- </div>
- </div>
- <div class="fillet_end">
- <div class="fillet_e_l"></div>
- </div>
- </div>
- </body>
- </html>
[讨论] 图片实现容器圆角(xhtml+css)
http://bbs.blueidea.com/thread-2871160-1-10.html
实现DIV圆角的JavaScript代码
http://www.sj33.cn/jc/wyjc/jsjc/200702/11071.html
HTML+CSS实现圆角矩形
http://blog.csdn.net/uno/archive/2007/01/08/1477233.aspx
Comments curvyCorners:让任何DIV层实现圆角效果
http://parandroid.com/curvycorners-let-any-effect-div-layer-fillet-without-pictures/
VML 圆角矩形
http://bbs.blueidea.com/viewthread.php?tid=2214542&page
简写:background:background-color background-image background-repeat background-attachment background-position;