首頁猿問請高手詳解這兩段代碼十分感謝

請高手詳解這兩段代碼十分感謝

CSS3 Html5

開滿天機 2022-07-07 13:09:35

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條經(jīng)驗獲得超8個贊

ul.box li:before {
:before元素的內(nèi)容之前插入新內(nèi)容
z-index: -2;
屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
position: absolute;
生成絕對定位的元素
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)容

反對回復 2022-07-11

Qyouu

TA貢獻1786條經(jīng)驗獲得超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瀏覽器下旋轉(zhuǎn)12度

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

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

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

反對回復 2022-07-11

慕田峪7331174

TA貢獻1828條經(jīng)驗獲得超13個贊

:before和 :after都是偽元素。都可以在被選元素的內(nèi)容中插入內(nèi)容，使用 content 屬性來指定要插入的內(nèi)容。兩個不同之外在于，:before是在被選元素的內(nèi)容的最前插入內(nèi)容，:after被選元素的內(nèi)容的最后插入內(nèi)容。
ul.box li:after 表示在類名為box的ul標簽下的所有l(wèi)i標簽的內(nèi)容插入一個:after偽元素，然后對這個偽列表設置了一堆樣式屬性。
ul.box li:before同理

反對回復 2022-07-11