如何利用CSS3陰影效果制作出立體感效果

來源：懂視網責編：小采時間：2020-11-27 18:50:28

如何利用CSS3陰影效果制作出立體感效果

如何利用CSS3陰影效果制作出立體感效果:使用的兩個CSS3屬性：box-shadow、transform，基本語法：box-shadowbox-shadow:5px 2px 6px #000;數值從左至右：陰影水平偏移值（正值向右，負值向左）；陰影垂直偏移值（正值向下，負值向上）；陰影模糊值；陰影顏色。transformtransform

推薦度：

點擊下載本文 文檔為doc格式

導讀如何利用CSS3陰影效果制作出立體感效果:使用的兩個CSS3屬性：box-shadow、transform，基本語法：box-shadowbox-shadow:5px 2px 6px #000;數值從左至右：陰影水平偏移值（正值向右，負值向左）；陰影垂直偏移值（正值向下，負值向上）；陰影模糊值；陰影顏色。transformtransform

transform
transform的效果很多，這里只用了旋轉：

transform: rotate(-3deg)
數值表示旋轉的角度，正值為順時針，負值為逆時針。
因為CSS3還是草案，所以現有瀏覽器的最新版都是以私有屬性來支持transform，需要加上-webkit-、-moz-、-o-、-ms-

具體實現思路：為了突顯立體感，要讓陰影左右重中間輕，這里使用了::before,::after偽元素，創建并讓它們定位在#Demo元素后(z-index:-1)，同時設置陰影，并設置旋轉，把思路用圖片來表示就是這樣：

這就是我們想要的效果了，具體代碼看：

CSS

#demo{ 
display:inline-block; 
position:relative; 
margin:50px; 
padding:20px; 
background:#fafafa; 
box-shadow:0 0 3px rgba(0, 0, 0, 0.2); 
-moz-border-radius:4px; 
border-radius:4px; 
color:rgba(0,0,0, 0.8); 
text-shadow:0 1px 0 #fff;
}
#demo::before, #demo::after{ 
position:absolute; 
content:""; 
top:10px; 
bottom:15px; 
left:10px; 
width:50%; 
box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); 
-webkit-transform: rotate(-3deg); 
-moz-transform:rotate(-3deg); 
-o-transform:rotate(-3deg); 
-ms-transform:rotate(-3deg); 
transform:rotate(-3deg); 
z-index:-1;
}
#demo::after{ 
right:10px; 
left:
auto; 
-webkit-transform:rotate(3deg); 
-moz-transform:rotate(3deg);
 -o-transform:rotate(3deg); 
 -ms-transform:rotate(3deg); 
 transform: rotate(3deg);
 }
#demo img{ vertical-align:bottom;}

HTML

<p id="demo">
 <img src="http://api.photoshop.com/home_aaa9cc05ee874f8fb3929d4ce5c41105/adobe-px-assets/e71ad2ef42e34821862244b04f533fd4" width="650" height="100" />
 
</p>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

如何利用CSS3陰影效果制作出立體感效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：制作效果立體

熱門焦點

如何利用CSS3陰影效果制作出立體感效果

如何利用CSS3陰影效果制作出立體感效果

CSS

HTML

如何利用CSS3陰影效果制作出立體感效果

最新推薦

猜你喜歡

熱門推薦