CSS设置border-radius后背景色不跟随圆角显示如何解决

将border-radius、半透明背景、backdrop-filter直接挂载在html、body根元素上时，浏览器对根元素的合成层渲染逻辑与普通DOM盒子存在差异：backdrop-filter生成的模糊效果层默认按根元素的初始矩形视口边界渲染，不会自动跟随根元素的border-radius做裁剪。此前尝试的overflow: hidden、添加实线边框、补充-webkit-border-radius前缀方案不生效，核心原因是这些属性作用在根元素上时，无法触发模糊效果层的圆角裁剪逻辑。

不要将毛玻璃、圆角效果直接绑定在根元素上，单独创建和显示区域等大的容器承载相关效果，所有页面内容放入该容器即可，参考实现如下：

/* 重置根元素默认样式 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}
/* 毛玻璃效果承载容器 */
.glass-wrap {
  position: fixed;
  inset: 0; /* 四边偏移置0，与视口尺寸完全匹配 */
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* 强制生成独立合成层，将模糊效果限制在容器边界内 */
  isolation: isolate;
  -webkit-backdrop-filter: blur(0.7em);
  backdrop-filter: blur(0.7em);
}

对应HTML结构调整：

<body>
  <div class="glass-wrap">
    <!-- 所有原有页面内容放置在此处 -->
  </div>
</body>

• isolation: isolate是修复效果的核心属性，会强制容器生成独立合成上下文，backdrop-filter生成的模糊层会被完全约束在容器边界内，自然跟随border-radius裁剪为圆角，不会溢出到圆角外的直角区域
• 如果是实现弹窗、浮层类局部毛玻璃效果，无需设置全视口尺寸，直接给对应浮层容器添加isolation: isolate、overflow: hidden和圆角属性，毛玻璃效果即可与圆角完美匹配
• 原代码中-webkit-backdrop-filter设置的模糊值与标准属性值不一致，统一数值可避免不同内核浏览器下模糊程度出现差异

异常效果参考：
border_radius圆角不生效异常示例

内容的提问来源于stack exchange，提问作者bergkas