网络编程
位置:首页>> 网络编程>> 网页设计>> 无图片CSS圆角的五个实例(4)

无图片CSS圆角的五个实例(4)

 来源:52css.com 发布时间:2008-08-02 12:18:00 

标签:圆角,图片,css

四、特殊css圆角 


CSS代码: 

background:transparent; 
width:40%;
}
.pillar h1, .pillar p {
margin:0 10px;
}
.pillar h1 {
font-size:2em; 
color:#fff;
}
.pillar p {
padding-bottom:0.5em;
}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
display:block; 
overflow:hidden;
font-size:1px;
}
.pillar .b1, .pillar .b2, .pillar .b4 {
height:1px;
}
.pillar .b2, .pillar .b3 {
background:#d66; 
border-left:1px solid #fff; 
border-right:1px solid #fff;
}
.pillar .b4 {
background:#d66; 
border-left:4px solid #fff; 
border-right:4px solid #fff;
}
.pillar .b1 {
margin:0 2px; 
background:#fff;
}
.pillar .b2 {
margin:0 1px; 
border-width:0 1px;
}
.pillar .b3 {
height:2px; 
margin:0;
}
.pillar .b4 {
margin:0 2px;
}
.pillar .boxcontent {
display:block; 
background:#d66; 
border-left:1px solid #fff; 
border-right:1px solid #fff; 
margin:0 5px;
}
 XHTML代码: 
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
<div class="boxcontent">
<h1>特殊css圆角矩形 - www.52css.com </h1>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com