无立体效果

立体效果

实现方式

box-shadow是实现矩形图形立体化的常用方法，text-shadow可实现文字的立体化，但对于其他不规则图形的立体化，上述方法就爱莫能助了。对此，filter展示了其强大之处。

drop-shadow 方法

filter: drop-shadow(x偏移量 y偏移量 模糊半径 颜色) 方法能给图像设置阴影效果。可接受参数和 box-shadow 基本一致，但不包括扩张半径和 inset 关键字。它可以给任何非透明部分（包括文字）一视同仁地打上阴影。

立体效果机理

立体感本质上是光影效果，在图形顶部的亮色投影或底部的暗色投影都可以实现立体感。对暗色投影要求投影颜色越往底部越暗，为此需要添加多层沿y方向错开的投影模拟逐步变暗的效果。对亮色投影反之。使用 hsl() 颜色表示法可以更方便地操作亮度。记住在最底层添加一层强烈模糊的暗投影可以让立体效果更突出。

filter: drop-shadow(0 1px hsl(16deg, 100.0%, 45.0%)) drop-shadow(0 2px hsl(16deg, 100.0%, 40%)) drop-shadow(0 3px hsl(16deg, 100.0%, 35%)) drop-shadow(0 4px hsl(16deg, 100.0%, 30%)) drop-shadow(0 5px hsl(16deg, 100.0%, 25%)) drop-shadow(0 5px 5px black);