我可以模糊 div 的边框吗？ CSS

Question

我希望我的盒子的颜色在中间非常不透明，然后在靠近边界时淡出。

Answer 1

您可以使用 box-shadow 来达到这个目的。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b

body {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

div {
  width: 25vw;
  height: 25vw;
  background: royalblue;
  box-shadow: 0 0 10px navy;
}

<div></div>

更新：

在看到您要查找的内容的图片后，我试图更好地匹配它。仍然 box-shadow.

body {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

div {
  width: 25vw;
  height: 25vw;
  background: #999999;
  box-shadow: inset 0 0 10vw 2.5vw white;
}

<div></div>

我可以模糊 div 的边框吗？ CSS

Can I blur the border of a div? CSS

css

border

更新：