前端CSS样式 box-shadow阴影被覆盖

使用box-shadow可以给元素加上一个阴影的效果。

box-shadow: h-shadow, v-shadow, blur, spread, color, inset

参数详细解释： 

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

 

有时候会遇到在hover时使用box-shadow，但是外阴影却没有效果，这是因为添加的阴影被其他组件覆盖了。可以指定z-index参数的值，值大的会覆盖小的。例如：z-index:1。设定好z-index后就可以解决覆盖问题了。

另外补充一下，对于hover的元素可以设置transition-duration的值，其单位为秒(s)。它适用于设置过渡时，将transition-duration放在哪个元素中，那么在这个元素被启用时就会按照transition-duration设定的时间来过渡。

 

参考资料：

1. https://segmentfault.com/q/1010000006793486

2. https://www.runoob.com/cssref/css3-pr-box-shadow.html