用图片和纯CSS制作圆角的方法
从DAFI那边看到的，很不错，以后也做成这样的看看效果，很有感觉，感觉图片的那种更加的好看，而且图片也不大，自己才刚刚起步，很多地方需要去学习的。
<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;}
/* 以下是图片+CSS圆角 */
.f_top,
.f_end {
clear: both;
height: 5px;
overflow: hidden;
background: url(images/fillet_bg.gif) right top;
}
.f_end {
background-position: right -5px;
}
.f_t_l,
.f_e_l {
width: 5px;
height: 5px;
overflow: hidden;
background: url(images/fillet_bg.gif) left top;
}
.f_e_l {
background-position: left -5px;
}
.box {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
/* 以上是图片+CSS圆角 */.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: #fff;
}
#div_2 {
width: 760px;
background: #eee;
}
#div_3 {
width: 490px;
background: #ddd;
}
#div_4 {
width: 260px;
background: #ccc;
}
#div_5 {
width: 210px;
background: #bbb;
}
#div_6 {
width: 150px;
background: #aaa;
}
/* 以下为纯CSS圆角 */
.divBox {
padding: 10px;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
b, u, i {
display: block;
height: 1px;
overflow: hidden;
}
/* 第一种圆角 */
b.f1 {
margin: 0 4px;
background: #000;
}
b.f2 {
margin: 0 2px;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
b.f3 {
height: 2px;
margin: 0 1px;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
/* 第一种圆角结束 *//* 第二种圆角 */
u.f1 {
margin: 0 3px;
background: #000;
}
u.f2 {
margin: 0 1px;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
u.f3 {
margin: 0 1px;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
/* 第二种圆角结束 *//* 第三种圆角 */
i {
margin: 0 1px;
background: #000;
}
/* 第三种圆角结束 */
-->
</style>
以上的是CSS样式。具体的运用我放在附件中了。
