🚀 拟态设计（Neumorphism）快速入门

拟态设计（Neumorphism）是一种结合扁平化和立体感的 UI 设计风格，近年来颇受欢迎。如果你对它还不熟悉，先来看看效果图吧！📸

📝 什么是拟态设计？

拟态设计通过柔和的阴影和圆角，营造出元素从背景“凸起”或“凹陷”的视觉效果。它主要依赖以下 CSS 属性：

border-radius：圆角效果
background：背景颜色
box-shadow：内外阴影

示例效果图

拟态设计示例

🌟 特点：柔和、立体、现代感十足。

🔧 实现代码

以下是一个简单的 HTML 和 CSS 示例，展示了拟态设计的实现方式：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neumorphism Demo</title>
  <link rel="stylesheet" href="https://fontawesome.dashgame.com/assets/font-awesome/css/font-awesome.css">
  <style>
    /* 样式见下方 */
  </style>
</head>
<body>
  <div class="container">
    <div class="top">
      <div class="top-left">
        <span class="d1"><i class="fa fa-music aircraft"></i></span>
        <span class="d2"><i class="fa fa-music aircraft"></i></span>
        <span class="d3"><i class="fa fa-music aircraft"></i></span>
        <span class="d4"><i class="fa fa-music aircraft"></i></span>
      </div>
      <div class="top-right">
        <i class="fa fa-music aircraft"></i>
        <p>音乐</p>
        <span class="d21"><i class="fa fa-music r-aircraft"></i></span>
        <span class="d31"><i class="fa fa-music r-aircraft"></i></span>
        <span class="d41"><i class="fa fa-music r-aircraft"></i></span>
      </div>
    </div>
  </div>
</body>
</html>

CSS 样式

/* 容器样式 */
.container {
  width: 1018px;
  margin: 0 auto;
  height: 660px;
  background-color: #e6eef4;
}

/* 顶部区域 */
.top {
  height: 200px;
  display: flex; /* 优化为 flex，提升布局灵活性 */
  justify-content: space-between;
}

/* 左侧区域 */
.top-left {
  width: 400px;
  margin: 50px;
  border-radius: 39px;
  background: #e6eef4;
  box-shadow: 33px 33px 67px #cad1d7, /* 外阴影：凸起效果 */
              -33px -33px 67px #ffffff; /* 内阴影：立体感 */
}

/* 左侧圆形按钮 */
.d1, .d2, .d3, .d4 {
  display: inline-block;
  width: 144px;
  height: 144px;
  margin: 24px;
  border-radius: 50%;
  background: #e6eef4;
  box-shadow: inset 14px 14px 22px #cfd6dc, /* 内凹阴影 */
              inset -14px -14px 22px #fdffff;
}

/* 右侧区域 */
.top-right {
  width: 400px;
  margin: 50px;
  border-radius: 39px;
  background: #e6eef4;
  box-shadow: 33px 33px 67px #cad1d7,
              -33px -33px 67px #ffffff;
}

/* 右侧小圆形按钮 */
.d21, .d31, .d41 {
  display: inline-block;
  width: 88px;
  height: 88px;
  margin: 21px;
  border-radius: 50%;
  background: #e6eef4;
  box-shadow: 6px 6px 12px #cad1d7, /* 外凸阴影 */
              -6px -6px 12px #ffffff;
}

/* 图标样式 */
.aircraft {
  font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  color: #4d8af0;
}

.r-aircraft {
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 24px;
  color: #4d8af0;
}

/* 文字样式 */
p {
  text-align: center;
  font-size: 24px;
  color: #576f87;
  font-weight: bold;
}

🌟 代码解析

container：设置背景色为 #e6eef4，作为整体底色。
top-left / top-right：
- border-radius: 39px：圆角矩形。
- box-shadow：双重阴影（正向和负向），营造立体凸起效果。
d1-d4 / d21-d41：
- border-radius: 50%：圆形按钮。
- box-shadow: inset：内阴影实现凹陷效果；普通阴影实现凸起效果。
图标与文字：使用 FontAwesome 的音乐图标，搭配居中布局。

💡 优化建议：将 .top 的 float 替换为 flex，布局更现代且易维护。

🔧 使用技巧

颜色调整：背景色和阴影色应保持低对比度（如 #e6eef4 和 #cad1d7），突出柔和感。
阴影参数：调整 box-shadow 的偏移量和模糊半径，控制凹凸深度。
交互效果：添加 :hover 伪类（如缩小阴影），增强动态感。

📌 推荐工具

快速生成拟态样式，试试这个网站：
🔗 Neumorphism.io

✅ 功能：在线调整圆角、阴影、颜色，实时预览代码。

✨ 完成啦！
你现在可以用这个代码轻松实现拟态设计！😄👍

目录CONTENT

CSS 拟态设计（Neumorphism）快速入门