纯CSS实现漂亮的圆角边界菜单
纯CSS实现漂亮的圆角边界菜单，超不错的效果，没有用到图片，全部是CSS写出来的，佩服作者的水平吧？
当前位置：编程学习 > JS >>
答案：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS实现漂亮的边界菜单</title>
<style type="text/css">
.outer ul {margin:3em; padding:0; list-style-type:none; background:transparent; height:3em;}
.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 {height:1px;}
.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 {height:2px; 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="/"><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="/"><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 />Discuz</span>
</b></a>
</li>
<li>
<a class="xmenu2" href="/"><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="/"><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="/"><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="/"><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="/"><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="/jscss/"><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="/"><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="/"><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>上一个：水晶按钮式的CSS导航菜单
下一个：CSS 竖排背景渐变的菜单
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。