全局圆角的实现方法

来源：互联网发布：函授网络教育好毕业编辑：程序博客网时间：2024/05/09 12:17

<!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(http://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(http://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(http://p.blog.csdn.net/images/p_blog_csdn_net/Rogues/EntryImages/20080819/fillet_bg.gif) left 5px;
}
.fillet_end {
 background: url(http://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;