老外用纯CSS实现的圆角边框_层和布局特效

很不错的CSS圆角边框效果，老外的东西，完全用CSS代码实现，虽然复杂了点，但至少用起来方便，而且也没有用JavaScript去控制样式，实用性大大增强，你可以运行一下看下效果，想信你会满意的……

<!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>
<title>老外用纯CSS实现的圆角 - /</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style>
.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:12px;
}
.xsnazzy {
background: transparent; 
width:240px; 
float:left; 
margin:0 3px;
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
/* / */
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxmrc {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}
* html .xboxmrc {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}
</style>
</head>
<body>
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxmrc">
<h1 class="color_a">mb5u.com</h1>
<p>模板无忧<a href="/">mb5u.com</a>提供学习资料、程序源码、视频教程等下载服务，做有质量的源码下载站。<br>
<a href="http://mb5u.com">Click here!</a>.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-03

[收藏][报错][返回列表]

老外用纯CSS实现的圆角边框_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些