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

Question

我的页面上有一个滑块来更改框阴影值。在一些高模糊值下，有一个不想要的框状阴影，当它应该一直是一个平滑的阴影时。无论如何可以轻松避免这种情况？谢谢您的帮助。附言我实际上也需要它与 '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 盒子阴影现在得到了很好的支持。 CanIUse

您可以在 MDN Documentation

中阅读有关 CSS 框阴影的更多信息

Answer 2

如果您想在要模糊的形状上超出其尺寸：

该代码创建了一个圆的副本，然后将其涂成黑色并使用 filter:blur(length);

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
}
.circle::after {
  position: absolute;
  display: block;
  content: " ";
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: blue;
}
.circle::before {
  position: absolute;
  display: block;
  content: " ";
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: black;
  top: 50%;
  left: 50%;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}

<div class="circle"></div>

您也可以通过这种方式创建嵌入阴影。

工作原理： 1.初始形状为shadow-color 2. 设置 overflow:hidden 这样就不会超出形状。 3.在上面放一个形状 4. 模糊顶部的形状

通过这样做，下面的形状通过创建内部阴影效果发光

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: black;
  overflow: hidden;
}
.circle::before {
  position: absolute;
  display: block;
  content: " ";
  border-radius: 50%;
  width: calc(100%);
  height: calc(100%);
  background-color: blue;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

<div class="circle"></div>

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

Box-shadow side-effect blur not smooth. inner square in shadow

html

css

box-shadow