为什么框影比例尺/扩展不向上？

Question

在处理带有半径的元素的框影扩展参数时，我注意到它不是按比例传播的：

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/

如果将值41 box更改为框影属性中的另一个值，就会发现阴影不再像父元素了。

我想这跟边界半径有关。是否有一种方法可以按比例扩展边界半径元素的框影？

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>

​