Chrome正常模式不显示CSS毛玻璃效果，隐身模式正常的问题求助

你的毛玻璃效果代码本身没问题——因为Chrome隐身模式能正常显示，说明不是代码或电脑硬件故障，问题出在Chrome正常模式的环境配置上。以下是具体排查和解决步骤：

• 禁用所有Chrome扩展：隐身模式默认会禁用所有扩展，大概率是某个扩展（比如广告拦截器、用户脚本工具、网页样式修改插件）干扰了毛玻璃样式的渲染。打开Chrome扩展管理页面，一次性禁用所有扩展，重启Chrome后测试效果。
• 重置Chrome默认设置：如果禁用扩展无效，尝试重置Chrome到初始状态，清除自定义的渲染、缓存相关设置。操作路径：Chrome设置 → 高级 → 重置并清理 → 重置设置。
• 关闭硬件加速：Chrome的硬件加速有时会导致模糊、滤镜类样式渲染异常。进入Chrome设置 → 系统 → 取消勾选“使用硬件加速模式（如果可用）”，重启后测试。

附：你的代码验证 #

代码逻辑是通过伪元素继承父元素背景并添加模糊、内阴影实现毛玻璃，本身是可行的，以下是整理后的代码：

CSS代码

.content {
  padding: 55px;
  margin: 100px auto;
  font-family: calibri;
  width: 30rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: inherit;
  overflow: hidden;
}

.content:before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -20px;
}

HTML代码

<div class="content">
  <center>
    <h1> Please enter your login information </h1>
  </center>
  <form name="login" action="" method="post">
    <label for="email"> <b>Enter your email</b> </label>
    <input type="text" name="email" size="48">
    <label for="password"> <b>Enter Your Password </b> </label>
    <input type="password" name="password" size="48">
    <button type="submit" name="submit"> Login </button>
    <span class="password"> <a href = "frgtpas.php"> Forgot  password? </a> </span>
  </form>
</div>

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