2

我的页面上有一个滑块来更改框​​阴影值。在某些高模糊值下，会出现一个不需要的盒子状的阴影，而它本来应该是一个平滑的阴影。有没有办法轻松避免这种情况？谢谢您的帮助。PS我实际上也需要它与“插图”一起使用。

在此处输入图像描述

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>

4

2 回答 2

4

对于圆形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 现在得到了很好的支持。我可以用吗

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

于 2015-06-15T11:07:13.850 回答
3

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

该代码创建一个圆圈的副本，然后将其着色为黑色并使用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>

于 2015-06-15T11:15:13.093 回答