盒子阴影副作用模糊不顺畅。阴影中的内部广场

Question

我的页面上有一个滑块可以更改框阴影值。在一些高模糊值的情况下，当它被认为是一个平滑的阴影时，就会有一个不需要的盒子打破阴影。无论如何要避免这种情况吗？谢谢您的帮助。 P. S. 我实际上也需要它与'插入'一起工作。

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，模糊不能超过宽度＆amp;元素的高度。可以传播。

由于您的元素为200px * 200px，因此模糊值的最大值为200px。

请看下面没有200px以上的示例，您会看到它按预期创建box-shadow

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

展开值也可以高于元素的宽度和高度，因此您可以做出更大的点差。

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

你也不需要这些前缀，因为CSS3 Box-shadow现在得到很好的支持。 CanIUse

您可以在MDN Documentation

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

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.初始形状是阴影颜色  2.设置溢出：隐藏，以便没有任何东西超出形状。  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>