我們先看一下將要實現的效果

第一眼看到這種效果以為是div堆疊出來的,翻開源碼發里面主要用的是css的box-shadow 屬性的方法
box-shadow 常規的使用方法如下

box-shadow: h-shadow v-shadow blur spread color /*blur 模糊距離*/ /*spread 陰影的尺寸*/

很少有人在box-shadow后面使用多個值,下面的代碼便是實現上面效果的關鍵

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), ----①0 8px 0 -3px #f6f6f6, ----②0 9px 1px -3px rgba(0,0,0,0.2), ----③0 16px 0 -6px #f6f6f6, ----④0 17px 1px -6px rgba(0,0,0,0.2); ----⑤

這些陰影作用在一個單獨的元素上,因為只做生成陰影用,我們可以利用css的:before來優化代碼

①的代碼通過before添加的元素給主div一個底邊框的效果,
②將陰影下移8px,陰影尺寸收縮3px,第一層立體效果,此時是沒有底邊框效果的
③給第一層陰影加一個底邊框
④⑤的效果是同上,改變的只是陰影的位置

最終代碼如下,由于box-shadow只支持IE9+,因此IE9+都是可以實現這種效果的

<style type="text/css">#box-shadow {width: 500px;height: 200px;border: 1px solid #ddd;margin: 0 auto;box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.2) ;position: relative;}#box-shadow:before{content: "";position: absolute;height: 50px;left: 0;right: 0;bottom: 0;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,0.2), 0 16px 0 -6px #f6f6f6, 0 17px 1px -6px rgba(0,0,0,0.2);} </style>

總結

以上是生活随笔為你收集整理的box-shadow页面立体效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。