當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

纯CSS3制作的圆角效果按钮菜单

發布時間：2023/11/27 生活经验 25 豆豆

生活随笔收集整理的這篇文章主要介紹了纯CSS3制作的圆角效果按钮菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS3制作的圓角效果按鈕菜單丨曲陽雕塑</title>
<style type="text/css">
nav{display: block; width: 100%; overflow: hidden;}
nav ul{margin: 80px 0 20px 0; padding: .7em; float: left; list-style: none; background: #444; background: rgba(0,0,0,.2); -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;}
nav li{float:left;}
nav a{float:left; padding: .8em 1.5em; text-decoration: none; color: #555; text-shadow: 0 1px 0 rgba(255,255,255,.5); font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica; letter-spacing: 1px; text-transform: uppercase; border-width: 1px; border-style: solid; border-color: #fff #ccc #999 #eee; background: #c1c1c1; background: -moz-linear-gradient(#f5f5f5, #c1c1c1); background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1)); background: -webkit-linear-gradient(#f5f5f5, #c1c1c1); background: -o-linear-gradient(#f5f5f5, #c1c1c1); background: -ms-linear-gradient(#f5f5f5, #c1c1c1); background: linear-gradient(#f5f5f5, #c1c1c1);}
nav a:hover, nav a:focus{outline: 0; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); background: #fac754; background: -moz-linear-gradient(#fac754, #f8ac00); background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00)); background: -webkit-linear-gradient(#fac754, #f8ac00); background: -o-linear-gradient(#fac754, #f8ac00); background: -ms-linear-gradient(#fac754, #f8ac00); background: linear-gradient(#fac754, #f8ac00);}
nav a:active{-moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;}
nav li:first-child a{border-left: 0; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}
nav li:last-child a{border-right: 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;}
</style>
</head>
<body>
<nav><ul><li><a href="#">Home</a></li><li><a href="#">Categories</a></li><li><a href="#">About</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul>
</nav>
</body>
</html><br><font color=black>▲　目前IE8及以前版本不兼容CSS3，請使用IE9/火狐/Chrome瀏覽器運行本效果。<br><hr></font>

轉載于:https://www.cnblogs.com/youtianxia/p/4747462.html

總結

以上是生活随笔為你收集整理的纯CSS3制作的圆角效果按钮菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。