html - 盒子阴影副作用模糊不平滑。阴影中的内部正方形

Question

我的页面上有一个 slider 来更改框​​阴影值。在一些高模糊值下，有一个不想要的框状阴影，当它应该一直是一个平滑的阴影时。无论如何可以轻松避免这种情况？谢谢您的帮助。附言实际上，我也需要它才能与“inset”一起使用。

div
{
  width:200px;
  height:200px;
  border-radius: 100px;
 background-color:blue;
 -webkit-box-shadow: 169px 129px 300px -15px rgba(0,0,0,1);
 -moz-box-shadow: 169px 129px 300px -15px rgba(0,0,0,1);
 box-shadow: 169px 129px 300px -15px rgba(0,0,0,1);
}

<div></div>

Answer 1

对于圆形 box-shadows，模糊不能超过元素的宽度和高度。不过，价差可以。

因为您的元素是 200px * 200px，所以模糊值的最大值是 200px。

看看下面的示例，它没有超过 200px，您会看到它按预期创建了 box-shadow

div {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: blue;
  box-shadow: 169px 129px 200px -15px rgba(0, 0, 0, 1);
}

<div></div>

展开值也可以高于元素的宽度和高度，因此您可以进行更大的展开。

div {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: blue;
  box-shadow: 169px 129px 0 250px rgba(0, 0, 0, 1);
}

<div></div>

您也不需要前缀，因为 CSS3 Box-shadows 现在得到了很好的支持。 CanIUse

您可以在 MDN Documentation 中阅读有关 CSS 框阴影的更多信息