当前位置:首页 > 学习手记 > 正文内容

用图片和纯CSS制作圆角的方法

心砚15年前 (2009-04-24)学习手记1547

从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样式。具体的运用我放在附件中了。

附件:20090424css圆角.rar

扫描二维码推送至手机访问。

版权声明:本文由皋城心砚发布,如需转载请注明出处。

本文链接:https://www.heyh.cn/93.html

标签: 学习CSS技巧

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。