:before元素的内容之前插入新内容
z-index: -2
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
position: absolute
生成绝对定位的元素
background: transparent
背景为透明
width: 90%
宽度为90%
height: 80%
高度为80%
content: ''
来插入生成内容
left: 20px
左边距离
bottom:8px
下面距离
-webkit-transform: skew(-12deg) rotate(-4deg)
斜切-12度，旋转-4度。下方同理，前缀是兼容不同浏览器
-moz-transform:skew(-12deg) rotate(-4deg)
-o-transform: skew(-12deg) rotate(-4deg)
-ms-transform: skew(-12deg) rotate(-4deg)
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6)
投影，左边投影为0，下方为8,虚化半径为20，投影颜色黑色，透明度为6%。下方同理，前缀是兼容不同浏览器
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6)
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6)
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6)
behavior: url(ie-css3.htc)
兼容IE浏览器
第二段代码基本一样，只不过:after元素的内容之后插入新内容
不行，如果是使用css自带的list-style属性定义前面的小圆点则不同浏览器，不同版本均有自己的解析方法，无法通过css实现具体控制，淘宝的是背景图片，使用css的list-style定义不确定因素太大，如果要求严格美观的页面布局应该在整个css中预先就清除列表元素的list-style属性然后用背景图片实现效果
