[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPZgs4eQ-1597887470974)(http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201912/7/1.gif)]
Box-Shadow 通常,我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能,“多层阴影”,制作一些非常有趣的动画。
box-shadow: h-shadow v-shadow blur spread color inset;
属性值描述
h-shadow 指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边
v-shadow 指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部
blur 阴影模糊半径,此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊
spread 阴影扩展半径,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小
color 阴影颜色,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
inset 阴影类型,默认的投影方式是外阴影;inset就是将外阴影变成内阴影
注意:多层阴影,最内层优先级最高,之后依次降低。使