纯CSS实现漂亮的圆角边界菜单

2024-09-05 12:19:53

字体：大中小

来源：转载

供稿：网友

纯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><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>Paul Cezanne</li><li>Henri Discuz</li><li>William 中文社区</li><li>John Constable</li><li>Claude 源码爱好者</li></ul></div><div class="outer"><ul><li>Paul Cezanne</li><li>Henri Matisse</li><li>William 网页特效</li><li>John Constable</li><li>Claude 最新下载</li></ul></div></body></html>

上一篇：纵向无序的CSS列表菜单

下一篇：CSS+JS滑动门菜单（荐）