css設定陰影效果:1、透過主元素和副元素的陰影效果疊加產生曲線陰影效果;2、透過添加兩個副元素,並將兩個副元素分別向左扭曲並旋轉稍小角度後形成平行四邊形,然後遮蓋在主元素下面來實現翹邊陰影效果。
本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
曲線陰影:
曲線陰影的實作原理是透過陰影的疊加效果產生的。即一個主元素設定陰影後,在主元素下方再增加一個副元素。使副元素和主元素重合,且副元素為一個弧形元素。此時主元素和副元素的陰影效果疊加產生曲線陰影。
第一步:
為主元素加入內部陰影,v和h方向的大小都設為0,但是模糊半徑設定的要較大,從而實現主元素內部的陰影效果。
第二步:
此時副元素需要變換的屬性有:加入到主元素層級的下層,透過z-index來實現;在主元素後面或前面加上副元素;副元素需要變換為弧形:border-radius:100px/10px;透過絕對定位確定副元素的位置;為副元素添加陰影。
HTML:
<p class="wrap effect"> <h1>Shawdow Effect</h1> </p>
CSS:
.effect{ position: relative; box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 50px #ddd inset; } .effect:after,.effect:before{ content: ''; background: #fff; position: absolute; z-index: -1; left: 10px; right: 10px; top:50%; bottom: 0px; border-radius: 100px/10px; box-shadow: 0 0 20px rgba(0,0,0,0.8); }
翹邊陰影:
###################################################################################################。邊陰影的原理和曲線陰影是差不多的,但是翹邊陰影卻用到了扭曲和旋轉兩個屬性。翹邊陰影在左邊和右邊也是添加兩個副元素,然後將兩個副元素分別向左扭曲並旋轉稍小角度後形成平行四邊形,然後遮蓋在主元素下面。 ######【推薦學習:###css影片教學###】#########css###.box{ width: 980px; height: auto; clear: both; overflow: hidden; margin: 20px auto; } .box li{ width: 300px; height: 210px; float: left; background: white; margin: 20px 10px; border: 2px solid #efefef; box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; position: relative; } .box li img{ display: block; width: 290px; height: 200px; margin: 5px; } .box li:before{ content: ''; z-index: -1; position: absolute; width: 90%; height: 80%; left: 20px; bottom: 8px; background:transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.6); transform: skew(-12deg) rotate(-4deg); } .box li:after{ content: ''; z-index: -1; position: absolute; width: 90%; height: 80%; right: 20px; bottom: 8px; background:transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.6); transform: skew(12deg) rotate(4deg); }
以上是css怎麼設定陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!