<!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://www.dafi.cn/files/images/fillet_bg.gif) right top;
}
.fillet_t_l,
.fillet_e_l {
width: 5px;
height: 5px;
overflow: hidden;
background: url(http://www.dafi.cn/files/images/fillet_bg.gif) left top;
}
.fillet_e_l {
width: 5px;
height: 5px;
overflow: hidden;
background: url(http://www.dafi.cn/files/images/fillet_bg.gif) left 5px;
}
.fillet_end {
background: url(http://www.dafi.cn/files/images/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>
daizhongxian
http://blog.chinaunix.net/space.php?uid=12957775
两条腿走路！（Windows、Linux）个人资料
订阅我的博客
一个全局圆角的实现方法，只用一张图片
(2008-06-12 12:10)
分类： Windows
博客推荐文章
- 解决mysql出现“the table is full”的问题 (5小时前)
- 前瞻2012年：11场不容错过的Linux盛会 (5小时前)
- 自己动手写内核（pdf，chm，source下载）（20080524修订版，原创） (6小时前)
- Android Input系统之触摸屏 (6小时前)
- 那些以X打头的程序 (7小时前)