可参考:http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
2017-01-26
最赞回答 / 祺妙Tony
分别使用before和after在导航节点前后都加上伪元素,设置上不同颜色,这样前一个节点的after和后一个节点before贴在一起组成的分割线会好看。分割线两边透明,中间不透明,渐变;去掉最前面节点的before和最后面节点的after,导航完成。<...code...>
2017-01-25
@雅人叔 因为在页面里面编辑代码提交的时候只是发送了ajax请求,并没有跳转页面,所以点击上一步的时候会返回上一个网页(章节改变时页面才发生了跳转)
2017-01-25
/*使用伪元素制作导航列表项分隔线*/
.nav li::after {
position: absolute;
content: '';
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, #f65f57,#f65f57, #333, #f65f57, #f65f57);
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child::after {
width: 0;
}
.nav li::after {
position: absolute;
content: '';
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, #f65f57,#f65f57, #333, #f65f57, #f65f57);
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child::after {
width: 0;
}
2017-01-25
/*制作圆*/
border-radius: 5px;
/*制作导航立体风格*/
box-shadow: 0 4px 0 #b64b61;
border-radius: 5px;
/*制作导航立体风格*/
box-shadow: 0 4px 0 #b64b61;
2017-01-25
http://yisibl.github.io/cubic-bezier/#.42,-0.42,.74,.15
贝塞尔曲线预览,做出各种过渡动画
贝塞尔曲线预览,做出各种过渡动画
2017-01-24
background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;
等价于:
background-image:linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
background-repeat:no-repeat;
background-position:right center; /*省略的值默认为center*/
background-size:1px 15px;
等价于:
background-image:linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
background-repeat:no-repeat;
background-position:right center; /*省略的值默认为center*/
background-size:1px 15px;
2017-01-22
.wrapper span {
display:block;
-webkit-transform:skew(-45deg);
-moz-transform:skew(-45deg);
transform:skew(-45deg);
}
逆时针
display:block;
-webkit-transform:skew(-45deg);
-moz-transform:skew(-45deg);
transform:skew(-45deg);
}
逆时针
2017-01-22