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

Question

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

Answer 1

您可以将box-shadow用于此目的。

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

＆＃13;

＆＃13;

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

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

更新

在看到你正在寻找的照片之后，我试图更好地匹配它。仍然使用box-shadow。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;