一、before和after伪元素
可以指定伪元素的尺寸,关联背景图片,结合伪类实现过度效果,
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
background: url(images/quotationmark.png) -3px -3px #ddd;
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
background: url(images/quotationmark.png) -1px -32px #ddd;
display: block;
height: 25px;
width: 25px;
}
总结所能实现的效果如下:
a.可以实现折纸效果,
b.3D按钮效果
c.叠加的图片的效果
二、页面出现小缝隙的解决办法;:
当板块之间出现小缝隙时候,考虑是否是文字的行高不同造成,解决办法可以重置最外成的字体的font-size:0,但不可重置内部的字体,这样就可以解决问题。
三、css3中选择奇偶数
div:nth-child(odd); //奇数个div
div:ntb-child(even); //偶数个div