<meta charset="utf-8" />
<ul id="nav">
<li><a href="####">首页</a></li>
<li><a href="####">关于我们</a></li>
<li><a href="####">发展理念</a></li>
</ul>
<style>
#nav{
width: 200px
}
#nav a{
display: block/*设置成块级元素让链接成为一个可点击方块而不是仅仅文字可点*/
border-top: 3px solid blue/*顶部设置蓝色边线，你愿意的话也可以用图片背景做点更复杂的小花样，比如波浪线*/
background: #eee
line-height: 30px
text-align: center
}
/*a:hover里面设置边框、字体、背景颜色鼠标悬停的状态*/
#nav a:hover{
border-color: red
color: green
font-size: 16px
}
ul, ol, li {
list-style:none outside none
}
a{
text-decoration: none
font-size: 14px
}
</style> <meta charset="utf-8" />
<ul id="nav">
<li><a href="####">首页</a></li>
<li><a href="####">关于我们</a></li>
<li><a href="####">发展理念</a></li>
</ul>
<style>
#nav{
width: 200px
}
#nav a{
display: block/*设置成块级元素让链接成为一个可点击方块而不是仅仅文字可点*/
border-top: 3px solid blue/*顶部设置蓝色边线，你愿意的话也可以用图片背景做点更复杂的小花样，比如波浪线*/
background: #eee
line-height: 30px
text-align: center
}
/*a:hover里面设置边框、字体、背景颜色鼠标悬停的状态*/
#nav a:hover{
border-color: red
color: green
font-size: 16px
}
ul, ol, li {
list-style:none outside none
}
a{
text-decoration: none
font-size: 14px
}
</style>
上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景
直角切角
先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。
注：background: #58a不是必须的，加上它是为了将其作为回退机制。
实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。
依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。
好了，现在实现了。如果要四个角的话，就要四层渐变了。
就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！
1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。 2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill 和.bar-fill的span标签。 Plain 3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。 .container { width:30%margin:0 auto } .title { background:#545965color:#fffpadding:15pxfloat:leftposition:relative-webkit-border-top-left-radius:5px-webkit-border-bottom-left-radius:5px-moz-border-radius-topleft:5px-moz-border-radius-bottomleft:5pxborder-top-left-radius:5pxborder-bottom-left-radius:5px } 4.首先建一个白色的背景 .bar-unfill {height:15pxdisplay:blockbackground:#fffwidth:100%border-radius:8px} 5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。 .bar-fill { height:15pxdisplay:blockbackground:#45c9a5width:0border-radius:8px-webkit-transition:width .8s ease-moz-transition:width .8s easetransition:width .8s ease-webkit-animation:progressbar 7s infiniteanimation:progressbar 7s infinite } 6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。 @-webkit-keyframes progressbar { from { width:0 } to { width:100% } } /* Standard syntax */ @keyframes progressbar { from { width:0 } to { width:100% } } 7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码： .bar-fill-stripes { height:15pxdisplay:blockbackground:#e74c3cwidth:0border-radius:8pxbackground-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)-webkit-transition:width .8s ease-moz-transition:width .8s easetransition:width .8s ease-webkit-animation:progressbar 7s infiniteanimation:progressbar 7s infinite } 追踪 Tracker 8.最后产生动画效果 .track-wrap { position:relativetop:-18px-webkit-animation:progressbar2 7s infiniteanimation:progressbar2 7s infinite } .track { height:20pxdisplay:blockbackground:#e74c3cwidth:20pxborder-radius:10pxposition:relativeleft:-12px } @-webkit-keyframes progressbar2 { from { left:0 } to { left:100% } } /* Standard syntax */ @keyframes progressbar2 { from { left:0 } to { left:100% }
