Html 为什么'；t盒阴影比例/按比例扩散？

在使用具有半径的元素的“长方体阴影”（box shadow）的“扩散”（spread）参数时，我注意到它不会按比例扩散：

div {
  height: 50px;
  width: 20px;
  background: blue;
  border-radius: 50px / 90% 90% 50% 50%;
  box-shadow: 100px 30px 1px 41px black;               
}

如果将值41px更改为box shadow属性中的另一个值，您将看到该阴影看起来不再像它的父元素

---

我想这和边界半径有关。有没有一种方法可以按比例扩展边界半径为元素的长方体阴影？

这是因为扩展半径不是比例因子

随着排列的增加，它看起来更接近圆周

如果要缩放，可以使用变换，例如

tranform:scale（2）；

div{
高度：50px；
宽度：20px；
背景：蓝色；
边界半径：50px/90%90%50%50%；
盒影：100px 30px 1px 41px黑色；
边缘底部：200px；
}
div+div{
变换：尺度（2）；
}

看来你在这一点上是对的。“扩散”不会保持原始形状，它只是扩散边界，可能是因为它的目的是模拟photoshop阴影，而不是使用它。我建议你要么坚持一个边界，要么你需要像js小提琴一样设置这两个形状，使用一个伪的。但是我不能在阴影上应用变换，对吗？我必须创建第二个元素或伪元素，对吗？@thadeuszlay确切地说，转换将影响该元素中的所有内容，而不仅仅是阴影。如果这是不需要的，那么使用伪元素似乎是正确的方法。有没有一种方法可以在不使用额外或伪元素的情况下缩小元素的副本。类似于长方体阴影的东西，但只是它的比例很小。这样的事情存在吗@Oroi@thadeuszlay我认为如果没有一些（伪）元素，就无法做到这一点。但是，您可以使用“复制”元素并将其重新用作背景图像，但它仅受Firefox支持。过滤器：drop-shadow（）；我们可以按比例做到这一点。但它只适用于Chrome。