純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 id="n9f31rh" class="outer"><ul><li>Paul Cezanne</li><li>Henri Discuz</li><li>William 中文社區</li><li>John Constable</li><li>Claude 源碼愛好者</li></ul></div><div id="npnxpdj" 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滑動門菜單（薦）