29. 单侧投影

[inkkk]

单侧投影

大多数人使用box-shadow的方法是，指定三个长度值和一个颜色值：

box-shadow: 2px 3px 4px rgba(0,0,0,0.5)

(1) 以该元素相同的尺寸和位置，画一个rgba(0,0,0,.5)的矩形

(2) 把它向右平移2px ,向下平移3px

(3) 将它进行4px的模糊处理

效果

box-shadow还有一个鲜为人知的第四个长度参数，他排在模糊半径之后，称作扩张半径 这个参数会根据你指定的值去扩大或缩小投影的尺寸举例来说，一个-5px的扩张半径会把投影的宽度和高度各减小10px(每边5px)

只有底边的投影

box-shadow: 0px 3px 4px -4px black

临边投影

box-shadow: 3px 3px 6px -3px black

双侧投影

box-shadow: 5px 0px 5px -5px black,
            -5px 0px 5px -5px black