关于box-shadow 属性的阴影外延值

[jackPanyj]

div.box-shadow {
    width: 100px;
    height: 100px;
    border: 10px solid teal;
    box-shadow: 0 0 0 -30px pink;
}

手册上说可正可负， 负数有什么作用吗 ，本身box-shadow 有 inset属性的，没有测试出负数有什么效果。

codepen链接

[doyoe]

外延值为负和inset关键字有本质的区别：

inset关键字是用来使得阴影从容器外部放到容器内部，并不是简单的位移，即内阴影和外阴影的区别

而外延值负值其实指的是，你可以通过这个设置，让你的阴影所占面积看起来小一点。举个例子，假设你定义了一个阴影的模糊值为 10px ，阴影其实是个渐变色，从深到浅，如果你想隐藏掉颜色较深的那一部分，就可以让外延值设置为负值，这是它的使用场景之一，希望可以解答你的疑惑

[jackPanyj]

懂了，谢谢。