请高手详解这两段代码 十分感谢

Question

ul.box li:before {

z-index: -2;

position: absolute;

background: transparent;

width: 90%;

height: 80%;

content: '';

left: 20px;

bottom:8px;

-webkit-transform: skew(-12deg) rotate(-4deg);

-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);

-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);

}

ul.box li:after {

z-index: -1;

position: absolute;

background: transparent;

width: 90%;

height: 80%;

content: '';

right:20px;

bottom:8px;

-webkit-transform: skew(12deg) rotate(4deg);

-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);

-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);

Answer 1

ul.box li:before {: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元素的内容之后插入新内容

Answer 2

li:after和li:before是伪类属性，after是之后的意思，before是之前的的意思，前面简单的就不用一一件事吧，见识一下后面的css3的部分， -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);apple浏览器兼容-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); firefox浏览器兼容-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); opera浏览器兼容box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); //这是设置阴影-webkit-transform: skew(12deg) rotate(4deg); //apple浏览器下旋转12度-moz-transform:skew(12deg) rotate(4deg);-o-transform: skew(12deg) rotate(4deg);-ms-transform: skew(12deg) rotate(4deg);

Answer 3

:before和 :after都是伪元素。 都可以在被选元素的内容中插入内容，使用 content 属性来指定要插入的内容。两个不同之外在于，:before是在被选元素的内容的最前插入内容，:after被选元素的内容的最后插入内容。ul.box li:after 表示在类名为box的ul标签下的所有li标签的内容插入一个:after伪元素，然后对这个伪列表设置了一堆样式属性。ul.box li:before同理