是否可以使用 CSS 制作模糊的渐变阴影？答案

【问题标题】：Is it possible to make a blurred gradient shadow with CSS?是否可以使用 CSS 制作模糊的渐变阴影？
【发布时间】：2018-04-03 00:07:14
【问题描述】：

这是一个影子：

所以我需要它成为按钮悬停时出现的阴影。我知道它的 css，但我没有设法使任何模糊：

background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
border-radius: 100px;
filter: blur(5px);

那么，两个基本问题：

是否可以用 CSS 制作这种模糊的东西？
如果是，是否可以将其设为按钮阴影？或者我还能如何解决这个问题？一个想法是只制作一个具有绝对定位的 png，这有点 hacky

更新

所以我想要达到的最终结果是这样的：

阴影重复按钮渐变是

linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);

【问题讨论】：

标签： css css-filters

【解决方案1】：

多个 box-shadow 怎么样：

.box {
 margin:50px;
 width:100px;
 height:50px;
 border-radius:20px;
 color:#fff;
 text-align:center;
 line-height:50px;
 box-shadow:
 20px 5px 40px #CF77F3,
   0px 5px 40px #009BFF,
  -20px 5px 40px #2AC9DB;
  background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
}

<div class="box">
this a button
</div>

【讨论】：

感谢您的回答！ :) 我没有设法通过按钮使用它，看看我需要实现什么：prntscr.com/j05juu 和我得到的：prntscr.com/j05k71。我意识到，当我们使用多个阴影时，它们会相互“叠加”或类似的东西，它不完全是渐变阴影吗？
@Victor 是的，它们覆盖了 :) 我的意图是你有一些类似于阴影的东西，它们可能表现为渐变......顺便在问题中添加你想要的图像，我会更新更好的结果；）
好的，添加了最终结果 :) 我只是 Sketch 的截图 :) 谢谢！

【解决方案2】：

您可以在现代浏览器中使用具有相同背景的伪元素并在其上应用滤镜模糊来获得此效果。

要获得与 IE 的兼容性，您还可以设置一个伪，并使用嵌入阴影来获得模糊的边框。至少在 Chrome 中，仍然可以看到一小部分边框。

.test {
  margin: 20px;
  background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);;
  border-radius: 50px;
  display: inline-block;
  height: 100px;
  width: 200px;
  position: relative;
  border: solid 4px black;
}

#test1:after {
  content: "";
  position: absolute;
  background-image: inherit;
  border-radius: inherit;
  width: inherit;
  height: inherit;
  transform: translate(0px, 20px) scale(1.1);
  z-index: -1;
  filter: blur(14px);
}

#test2:after {
  content: "";
  position: absolute;
  border-radius: 90px;
  width: 250px;
  height: 150px;
  z-index: -1;
  top: 1px;
  left: -25px;
  background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
  box-shadow: inset 0px 0px 25px 18px white;
}

<div class="test" id="test1">
</div>
<div class="test" id="test2">
</div>

【讨论】：