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);
3 回答
嗶嗶one
TA貢獻1854條經驗 獲得超8個贊
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元素的內容之后插入新內容
Qyouu
TA貢獻1786條經驗 獲得超11個贊
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);
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
:before和 :after都是偽元素。 都可以在被選元素的內容中插入內容，使用 content 屬性來指定要插入的內容。兩個不同之外在于，:before是在被選元素的內容的最前插入內容，:after被選元素的內容的最后插入內容。
ul.box li:after 表示在類名為box的ul標簽下的所有li標簽的內容插入一個:after偽元素，然后對這個偽列表設置了一堆樣式屬性。
ul.box li:before同理
- 3 回答
- 0 關注
- 199 瀏覽
添加回答
舉報
0/150
提交
取消