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貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊
ul.box li:before {
:before元素的內(nèi)容之前插入新內(nèi)容
z-index: -2;
屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
position: absolute;
生成絕對(duì)定位的元素
background: transparent;
背景為透明
width: 90%;
寬度為90%
height: 80%;
高度為80%
content: '';
來插入生成內(nèi)容
left: 20px;
左邊距離
bottom:8px;
下面距離
-webkit-transform: skew(-12deg) rotate(-4deg);
斜切-12度，旋轉(zhuǎn)-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元素的內(nèi)容之后插入新內(nèi)容
Qyouu
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊
li:after和li:before是偽類屬性，after是之后的意思，before是之前的的意思，前面簡單的就不用一一件事吧，見識(shí)一下后面的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); //這是設(shè)置陰影
-webkit-transform: skew(12deg) rotate(4deg); //apple瀏覽器下旋轉(zhuǎn)12度
-moz-transform:skew(12deg) rotate(4deg);
-o-transform: skew(12deg) rotate(4deg);
-ms-transform: skew(12deg) rotate(4deg);
慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
:before和 :after都是偽元素。 都可以在被選元素的內(nèi)容中插入內(nèi)容，使用 content 屬性來指定要插入的內(nèi)容。兩個(gè)不同之外在于，:before是在被選元素的內(nèi)容的最前插入內(nèi)容，:after被選元素的內(nèi)容的最后插入內(nèi)容。
ul.box li:after 表示在類名為box的ul標(biāo)簽下的所有l(wèi)i標(biāo)簽的內(nèi)容插入一個(gè):after偽元素，然后對(duì)這個(gè)偽列表設(shè)置了一堆樣式屬性。
ul.box li:before同理
- 3 回答
- 0 關(guān)注
- 205 瀏覽
添加回答
舉報(bào)
0/150
提交
取消