Css中使用box-shadow设置下拉阴影框

Css中使用box-shadow设置下拉阴影框

box-shadow 属性可以设置一个或多个下拉阴影的框

可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;
div.box{
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

参数详解
值 描述
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset
可选。从外层的阴影（开始时）改变阴影内侧阴影