向 div 添加模糊边缘，但保持内部内容透明

Question

我有一个滑块，我希望内容 div 的边缘具有模糊效果，模糊其后面的背景图像。背景图像来自父 div。正如您所看到的，里面的内容并不模糊，您可以透过背景看到内容，但边缘是模糊的。关于如何实现这种效果有什么想法吗？

无论是纯 CSS 还是与 JavaScript 混合，我都在使用 React。

Answer 1

clip-path这是使用( documentation ) 和backdrop-filter( documentation )的方法，两者都是相对较新的规则，因此请检查您的浏览器兼容性。

我们使用剪辑路径在盒子内部选择 10% 的“框架”，然后应用 10px 模糊backdrop-filter

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 变量的版本，因此您可以快速/轻松地调整模糊边框的厚度。只需更改--bCSS 变量：

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>