为什么没有阴影尺度/传播？

Question

当玩半径元素的box-shadow扩散参数时，我注意到它没有按比例扩散：

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

https://jsfiddle.net/thadeuszlay/agqqge8h/

如果将值41px更改为box-shadow属性中的另一个值，则会看到阴影看起来不再是父元素。

我想这与border-radius有关。有没有办法按比例扩展边框半径的元素的盒子阴影？

Answer 1

这是因为传播半径不是比例因子。

当你增加传播时，它会看起来更接近圆周。

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

tranform: scale(2);

div {
  height: 50px;
  width: 20px;
  background: blue;
  border-radius: 50px / 90% 90% 50% 50%;
  box-shadow: 100px 30px 1px 41px black;
  margin-bottom: 200px;
}
div + div {
  transform: scale(2);
}

<div></div>
<div></div>