纯CSS3制作的圆角效果按钮菜单
生活随笔
收集整理的這篇文章主要介紹了
纯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制作的圆角效果按钮菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 个性签名韩语
- 下一篇： Linux下Tomcat的安装配置