在div中添加模糊的边缘，但使内容保持透明。

Question

​

​

我有一个滑块，我希望内容div的边缘有一个模糊的效果，模糊背景图像的背后。背景图像来自父div。因为你可以看到里面的内容不是模糊的，你可以通过背景看到，但边缘是模糊的。对于如何达到这一效果，有什么想法吗？

不管是CSS还是与JavaScript混在一起，我都在使用React。

Answer 1

这里有一种使用clip-path (文档)和backdrop-filter (文档)的方法，它们都是相对较新的规则，因此检查您的浏览器兼容性。

我们使用剪辑路径在您的框内选择10%的“帧”，然后用backdrop-filter应用10 of模糊。

​

body {
  min-height: 100%;
  background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px 100px;
}

.frame {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
  backdrop-filter: blur(10px);
}

.content {
  position: absolute;
  border: 1px #fff solid;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
}

<div class="box">
  <div class="frame"></div>
  <div class="content"> Your text here</div>
</div>

​

这里有一个使用CSS变量的版本，您可以快速/轻松地调整模糊的边框厚度。只需更改--b CSS变量：

​

body {
  min-height: 100%;
  background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}

.box {
  /* The border thickness (Can be a percentage or pixel value) */
  --b: 6px;
  /* Work out the inverse value for the right/bottom sides of the clip path */
  --b2: calc(100% - var(--b));
  
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px 100px;
}

.frame {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 0% 100%, var(--b) 100%, var(--b) var(--b), var(--b2) var(--b), var(--b2) var(--b2), var(--b) var(--b2), var(--b) 100%, 100% 100%, 100% 0%);
  backdrop-filter: blur(10px);
}

.content {
  position: absolute;
  border: 1px #fff solid;
  top: var(--b);
  left: var(--b);
  right: var(--b);
  bottom: var(--b);
}

<div class="box">
  <div class="frame"></div>
  <div class="content"> Your text here</div>
</div>

​

Answer 2

如果在内容框上设置相同的背景图像，则不需要使用clip-path。警告：background-attachment必须是fixed。如果您对所有的框都使用flex，只需在内容上设置position: absolute就足以将其集中在顶部。

​

html, body, .bg {
  height: 100%;
  width: 100%;
}

.bg, .blur-box, .content-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg, .content-box {
  background: url(https://picsum.photos/seed/1/1920/1080/) no-repeat fixed 0 0 / cover;
}

.blur-box {
  position: relative;
  width: 70vh;
  height: 70vh;
  backdrop-filter: blur(5px);
}
 
.content-box {
  position: absolute;
  width: 50vh;
  height: 50vh;
  color: white;
  border: 1px solid white;
}

<div class="bg">
  <div class="blur-box">
  </div>
  <div class="content-box">
      TEXT
  </div>
</div>

​