CSS圆角层布局(完美兼容)_层和布局特效

大家都很喜欢CSS的圆角效果，但是布局起来有点麻烦，尤其是对不熟悉CSS的新手朋友更是感觉无从下手的感觉，其实是有捷径方法的，不信看看本代码吧，不但圆角效果好，而且还兼容IE6、IE7、FF、Chrome等多种主流浏览器，着实很不错。

<!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>圆角布局的实例</title>
<meta http-equiv="mrc-type" mrc="text/html; charset=gb2312">
<style type="text/css">
/*注:这里的"b"元素,不是HTML的"b"标签,只相当于一个普通DIV*/
body{
	margin:20px 10px;
	background-color: #FFF;
	font:12px;
}
#vessel{/*容器DIV*/
	width:800px;
	background: #9BD1FA
}
b.rtop, b.rbottom{/*圆角矩形顶部和底部设置块状显示及背景颜色*/
	display:block;
	background: #fff;
}
b.rtop b, b.rbottom b{/*设置顶部和底部组成圆角的各元素块状显示和高度为1像素,及背景颜色,overflow为了适应IE6*/
	display:block;
	height: 1px;
	overflow: hidden;
	background: #9BD1FA
}
b.r1{margin: 0 5px}/*详细设置组成圆角元素长度差值,形成圆角视觉效果*/
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height: 2px}/*圆角上半部分的最下元素和下半部分的最上元素,加高一像素为了平滑边缘*/
</style>
</head>
<body>
<div id="vessel">
	
		
		
		
		
	
	模板无忧（mb5u.com）提供各类网页模板、视频教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。在浏览器IE6,IE7,FF,Chrome浏览器下测试通过。
	
		
		
		
		
	
</div>
</body>
</html>

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

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

CSS圆角层布局(完美兼容)_层和布局特效

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

层和布局特效推荐

猜你也喜欢看这些