无立体效果
立体效果
实现方式
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);