伪类：伪类：
伪元素：伪元素：：
伪类盒子阴影
box-shadow 属性实现盒子阴影效果，repaint 消耗较多，可以通过修改伪元素的透明度实现盒子阴影
实现原理：
Before
Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但重绘消耗较多
After
通过修改伪元素的透明度来实现同样的效果,没有重绘消耗
伪元素面包屑
伪元素悬停动画
伪元素角度边界
原理：transform: skewY(xxdeg);
Bottom Angled Edge
Bottom Angled Edge
Reversed
Top Angled Edge
Top Angled Edge
Reversed
Top & Bottom Angled Edges
Top & Bottom Angled Edges
Reversed
自动打字动画
webdesign
背景水印
Was Phileas Fogg rich? Undoubtedly. But those who knew him best could not imagine how he had made his fortune, and Mr. Fogg was the last person to whom to apply for the information. He was not lavish, nor, on the contrary, avaricious; for, whenever he knew that money was needed for a noble, useful, or benevolent purpose, he supplied it quietly and sometimes anonymously. He was, in short, the least communicative of men. He talked very little, and seemed all the more mysterious for his taciturn manner. His daily habits were quite open to observation; but whatever he did was so exactly the same thing that he had always done before, that the wits of the curious were fairly puzzled.
Had he travelled? It was likely, for no one seemed to know the world more familiarly; there was no spot so secluded that he did not appear to have an intimate acquaintance with it. He often corrected, with a few clear words, the thousand conjectures advanced by members of the club as to lost and unheard-of travellers, pointing out the true probabilities, and seeming as if gifted with a sort of second sight, so often did events justify his predictions. He must have travelled everywhere, at least in the spirit.
伪元素页码摘要
- 青铜-1、伪类实现盒子阴影
- 青铜-2、伪元素:before实现的面包屑导航栏
- 青铜-3、伪元素实现悬停时按钮填充和边界浮动动画
- 青铜-4、伪类after实现的三角箭头
- 青铜-5、伪类after实现的图片箭头
- 青铜-6、伪元素实现带角度的底部边界（倾斜的边界）
- 王者-1、伪元素和平移（translate）变换实现的提示框
- 王者-2、使用CSS3伪元素实现的自动打字动画
- 王者-3、CSS3 伪元素构建的文章水印背景
- 王者-4、CSS3 用伪元素做页码摘要
兼容性
IE8 不支持 CSS3 很多特性，伪元素nth-child 可以用 + 相邻元素 实现
IE9.js 解决 IE5.5 至 IE8 CSS3的特性兼容问题