代码之家 › 专栏 › 技术社区 › A.S.J

我可以模糊div的边界吗?CSS

border css

A.S.J · 技术社区 · 8 年前

我希望我的盒子的颜色在中间是非常不透明的,然后当它接近边框时淡出。

1 回复 | 直到 8 年前

Community Mohan Dere 6 年前

您可以使用 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>

更新:

看到你要找的东西的照片后,我试着更好地匹配它。仍然与 长方体阴影 .

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