纯CSS打造漂亮的圆角边界导航
时间：2011-02-19 来源：网页代码站
纯CSS实现漂亮的圆角边界菜单，超不错的效果，没有用到图片，全部是CSS写出来的，佩服作者的水平吧？
代码内容：
<!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打造漂亮的圆角边界导航_网页代码站(www.webdm.cn)</title>
<style type="text/css">
.outer ul {margin:3em; padding:0; list-style-type:none; background:transparent; }
.outer li {display:block; float:left;}
.outer {display:block; position:relative; background:#eee; padding:2em; margin:20px 15px;}
.xsnazzy {background:transparent;}
.xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal; padding-bottom:0.5em;}
.xtop {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow: hidden;
}
.xb1, .xb2, .xb3 {}
.xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 5px; background:#fff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 { margin:0 1px;}
.xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;}
a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em; font-size:0.9em;}
a.xmenu2:hover {background:transparent; cursor:pointer;}
a.xmenu2:hover span {color:#000;}
a.xmenu2:hover .xboxcontent {background:#eee; border-color:#888; border-bottom:1px solid #eee;}
a.xmenu2:hover .xb1 {background:#888;}
a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;}
.xboxcontentd {display:block; background:#cc6; border:0 solid #fff; border-width:1px 1px 0 1px; padding-top:5px;}
a.xmenu2:hover .xboxcontentd {background:#eee; border-color:#888; border-top:1px solid #eee;}
</style>
</head>
<body>
<div class="outer">
<ul>
<li>
<a class="xmenu2" href="http://www.cnblogs.com/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b
class="xb4"></b></b><span class="xboxcontent">
Paul<br />Cezanne</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="http://www.cnblogs.com/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b
class="xb4"></b></b><span class="xboxcontent">
Henri<br />WebDm.cn</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="http://www.cnblogs.com/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b
class="xb4"></b></b><span class="xboxcontent">
William<br />中文社区</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="http://www.cnblogs.com/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b
class="xb4"></b></b><span class="xboxcontent">
John<br />Constable</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b
class="xb4"></b></b><span class="xboxcontent">
Claude<br />网页代码站</span>
</b></a>
</li>
</ul>
</div>
<div class="outer">
<ul>
<li>
<a class="xmenu2" href="http://www.cnblogs.com/"><b class="xsnazzy"><span class="xboxcontentd">
Paul<br />Cezanne</span>
</b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
</li>
<li>
<a class="xmenu2" href="http://www.cnblogs.com/"><b class="xsnazzy"><span class="xboxcontentd">
Henri<br />Matisse</span>
</b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
</li>
<li>
<a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><span class="xboxcontentd">
William<br />网页特效</span>
</b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
</li>
<li>
<a class="xmenu2" href="http://www.cnblogs.com/"><b class="xsnazzy"><span class="xboxcontentd">
John<br />Constable</span>
</b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
</li>
<li>
<a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><span class="xboxcontentd">
Claude<br />最新下载</span>
</b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
</li>
</ul>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/2d5964ae-4470-466f-b0ce-d7df47e16490.html
相关阅读 更多 +
