shadow 探究(一) - 立体卡片

box-shadow: -7px 0 5px -5px #ccc

box-shadow: 7px 0 5px -5px #ccc

box-shadow: 0 -7px 5px -5px #ccc

box-shadow: 0 7px 5px -5px #ccc

参数: x 方向偏移量(右+), y 方向偏移量 (下+),模糊半径,扩张半径

扩张半径会根据指定的值去扩大或缩小投影尺寸,如果我们用一个负的扩张半径,而他的绝对值刚好等于模糊半径,那么投影的尺寸就会与投影所属的元素尺寸完全一致,除非使用偏移量来移动他,否则我们将看不到任何投影。

box-shadow: -7px 0 5px 5px #ccc

box-shadow: 7px 0 5px 5px #ccc

box-shadow: 0 -7px 5px 5px #ccc

box-shadow: 0 7px 5px 5px #ccc

Was this page helpful?