css - 在 CSS 中添加模糊边框

Question

如何使用 CSS 在由拉伸(stretch)和模糊的周边像素组成的图像的所有边上添加 100px 的边框？例如图像左侧的边框只是第 1-3 列水平拉伸(stretch)并模糊在一起？

我看到其他帖子解释了如何保持边缘清晰但中心模糊。

Answer 1

如果你想模糊图像的边缘 and 如果你有一个 background-color 那么你可以使用 box-shadow 和 inset 来归档你想要的行为:

box-shadow: inset 0px 0px 40px 40px #DBA632;

#DBA632 是您的背景色。

看这个片段:

body {
  background: #DBA632;
}
div {
  background: url('https://placekitten.com/500/300');
  width: 500px;
  height: 300px;
  margin: 50px;
  box-shadow: inset 0px 0px 40px 40px #DBA632; /* change to alter the effect*/
}

<div></div>

---

旧答案:

你在找这样的东西吗？

box-shadow: 0px 0px 40px 40px #000000;

前两个值设置阴影的偏移量，第三个值是模糊量，最后一个值是阴影的扩散。

您可以使用这些值来查看它们如何改变效果:DEMO