这段代码如何书写。

1、制作导航圆角

提示:使用border-radius实现圆角

2、制作导航立体风格

提示:使用box-shadow实现立体风格

3、制作导航分隔线

提示:使用渐变与伪元素制作

4、删除第一个和最后一个导航分隔线

提示:使用伪元素删除第一个和最后一个分隔线


李珗殅3215805
浏览 1179回答 1
1回答

七寒谷

<style> body{   background: #ebebeb; } .nav{   width:560px;   height: 50px;   font:bold 0/50px Arial;   text-align:center;   margin:40px auto 0;       background: #f65f57;   /*制作圆*/   border-radius:10px;           /*制作导航立体风格*/           box-shadow:0 5px 0; } .nav a{   display: inline-block;   -webkit-transition: all 0.2s ease-in;   -moz-transition: all 0.2s ease-in;   -o-transition: all 0.2s ease-in;   -ms-transition: all 0.2s ease-in;   transition: all 0.2s ease-in; } .nav a:hover{   -webkit-transform:rotate(10deg);   -moz-transform:rotate(10deg);   -o-transform:rotate(10deg);   -ms-transform:rotate(10deg);   transform:rotate(10deg); } .nav li{   position:relative;   display:inline-block;   padding:0 16px;   font-size: 13px;   text-shadow:1px 2px 4px rgba(0,0,0,.5);   list-style: none outside none; } /*使用伪元素制作导航列表项分隔线*/ li:after{content:"|";position:absolute;right:0;}         /*删除第一项和最后一项导航分隔线*/ li:last-child:after{display:none;} .nav a, .nav a:hover{   color:#fff;   text-decoration: none; } </style>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3