CSS中box-shadow属性

CSS中box-shadow属性

box-shadowbox-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果:
.wrapper{position:fixed;left:0;top:0,bottom:0,right:0,background-color:red;box-shadow:03px5pxrgba(0,0,0,.3)}以上box-shadow中的0表示水平偏移，3px表示垂直偏移，5px表示模糊大小，rgba(0,0,0,.3)表示投影的颜色。
常用的投影效果主要由偏移、模糊、颜色组成。
无论是投影效果还是盒阴影，光源都默认在左上角，所以水平偏移如果是整数则表示投影偏右，如果是负数则表示投影偏左，同理垂直偏移也是一样。
内阴影box-shadow中支持inset关键字，表示阴影向元素内部。
.box{width:100px;height:100px;background-color:blue;box-shadow:inset3px3px5pxrgba(0,0,0,.6);}.box1{width:100px;height:100px;background-color:blue;box-shadow:3px3px5pxrgba(0,0,0,.6);}box-shadow:内阴影效果适合实现内嵌效果，表现更低一层的视觉效果。
bobx-shadow：内阴影的水平和垂直偏移方向和外阴影一致，都是左上角光源。
颜色覆盖box-shadow可以生成的阴影位于文字内容下面，背景颜色的上面，所以我们就可以实现让元素上面覆盖一层颜色。
box-shadow内阴影颜色覆盖是有局限的，对img这样的标签元素时无效的。
容易忽略的地方box-shadow可以接收2-4个值，前两个值是固定的，分别表示水平偏移和垂直偏移，第三个值表示模糊半径，第四个值表示扩展半径，第四个值日常中很少用到，主要用于两个方面：轮廓模拟和单侧阴影。
轮廓模拟我们可以借助第四个长度值来实现：
.warpper{background-color:blue;//轮廓模拟box-shadow:inset002px#BF56FC;}单侧阴影可以用扩展半径来实现，因为扩展半径支持负值，当我们给模糊半径设置的比较大，就可以看到左右两侧有部分阴影了。
.warpper{width:160px;padding:15px;background-color:#fff;box-shadow:03px6pxrgba(0,0,0,.4);}box-shadow还可以实现多边框效果，而且也支持圆角效果。我们只需要多设置几个进行叠加就可以实现。
如果想用box-shadow实现多种css加载效果，我们可以与keyframes结合，这样动画效果也有。
box-shadow还可以用于动画与性能的优化，例如我们实现一个盒子阴影的过渡效果:
.wrapper{transition:all.4s;box-shadow:07px11pxrgba(0,0,0,0.4);}.wrapper:hover{box-shadow:015px23pxrgba(0,0,0,0.8)}2024-09-18