css:阴影效果box-shadow

属性

box-shadow 属性值由四个参数组成：

• 水平偏移量：表示阴影相对于元素的水平位置。
• 垂直偏移量：表示阴影相对于元素的垂直位置。
• 模糊度：表示阴影的模糊程度。
• 颜色：表示阴影的颜色

示例

单个box-shadow

0px -2px 6px rgba(0, 0, 0, 0.5); （水平偏移为0表示不进行水平偏移；垂直为-2表示向上偏移2px；模糊度为6px；颜色为rgba(0, 0, 0, 0.5)）

组合box-shadow

box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    /* 下方和右侧模糊 */
    0 -2px 6px rgba(0, 0, 0, 0.5),
    /* 上方模糊 */
     -2px 0 6px rgba(0, 0, 0, 0.5),
    /* 左侧模糊 */
    2px 0 6px rgba(0, 0, 0, 0.5)
    /* 右侧模糊 */
;