箭头向上:
#content:before{ position:absolute; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid #ccc; content:" "; display:block; width:0; height:0 }
位置自己调整一下即可,向下、左、右 以此类推,对于content仅有背景色而没有边框的情况下是毫无违和感的。
CSS实现div的淡入效果
@keyframes fade-in { 0% {opacity: 0;}/*初始状态 透明度为0*/ 40% {opacity: 0;}/*过渡状态 透明度为0*/ 100% {opacity: 1;}/*结束状态 透明度为1*/ } @-webkit-keyframes fade-in {/*针对webkit内核*/ 0% {opacity: 0;} 40% {opacity: 0;} 100% {opacity: 1;} } #应用 #wrapper { animation: fade-in;/*动画名称*/ animation-duration: 1.5s;/*动画持续时间*/ -webkit-animation:fade-in 1.5s;/*针对webkit内核*/ }
渐变背景色
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#0f5ed7,endColorStr=#eee); /*IE 6 7 8*/ background: -ms-linear-gradient(left, #0f5ed7,#eee); /* IE 10 */ background:-moz-linear-gradient(left, #0f5ed7,#eee);/*火狐*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#0f5ed7), to(#eee));/*谷歌*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f5ed7), to(#eee));/* Safari 4-5, Chrome 1-9*/ background: -webkit-linear-gradient(left, #0f5ed7, #eee); /*Safari5.1 Chrome 10+*/ background: -o-linear-gradient(left, #0f5ed7, #eee);/*Opera 11.10+*/