玻璃与拟物

毛玻璃 / Frosted Glass
- background backdrop-filter border border-radius box-shadow
玻璃拟态 / Glassmorphism
- 在毛玻璃基础上再加：两层阴影 + 细边框 + Z 轴层次，通过「模糊 + 透明度 + 高光边框 + 多层阴影」让卡片看起来像漂浮在空间中的玻璃片，强调纵深
拟物 / Neumorphism
- 不使用模糊，用双向内阴影制造凹凸，借助「软光源」模拟真实物体被按压或凸起时的光影，形成塑料/橡胶触感
液态玻璃 / Liquid Glass
- 毛玻璃 + 高饱和渐变边框 + 超软阴影

参考¶

https://github.com/Jaishree2310/GlassyUI-Components

案例¶

<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <title>4 种 CSS 风格一次看完</title>
  <style>
    /* 通用 */
    html,
    body {
      margin: 0;
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    }

    .wrap {
      display: flex;
      height: 100%;
      background: url(https://picsum.photos/1600/800) center/cover;
    }

    .card {
      flex: 1;
      margin: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: bold;
      color: \#fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    }

    /* 1. 毛玻璃 */
    .frost {
      background: rgba(255, 255, 255, .25);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .4);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
    }

    /* 2. 玻璃拟态 */
    .glass {
      background: rgba(255, 255, 255, .1);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .3);
    }

    /* 3. 拟物（背景改为浅色方便看光影） */
    .neu {
      background: \#e0e0e0;
      color: \#333;
      border-radius: 30px;
      box-shadow: 8px 8px 16px \#bebebe, -8px -8px 16px \#ffffff;
    }

    /* 4. 液态玻璃 */
    .liquid {
      background: rgba(255, 255, 255, .15);
      backdrop-filter: blur(16px);
      border-radius: 30px;
      border: 2px solid transparent;
      background-clip: padding-box;
      position: relative;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    }

    .liquid::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 30px;
      background: linear-gradient(45deg, \#ff00cc, \#3333ff);
      z-index: -1;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="card frost">毛玻璃 Frosted Glass</div>
    <div class="card glass">玻璃拟态 Glassmorphism</div>
    <div class="card neu">拟物 Neumorphism</div>
    <div class="card liquid">液态玻璃 Liquid Glass</div>
  </div>
</body>

</html>