Neumorphism是一種結(jié)合扁平與擬物化設(shè)計(jì)的UI風(fēng)格，通過(guò)柔和陰影實(shí)現(xiàn)元素浮起或凹陷的立體效果。 1. 背景與元素顏色需相近以實(shí)現(xiàn)融合感，如body和按鈕均使用#e0e0e0；2. 使用雙陰影營(yíng)造立體感，外陰影為8px 8px 16px #c9c9c9和-8px -8px 16px #ffffff，按下時(shí)改為inset內(nèi)陰影並縮放元素；3. 圓角建議12px~20px以保持柔和；4. 避免邊框以維持無(wú)縫視覺(jué)。可應(yīng)用於按鈕、輸入框、開(kāi)關(guān)、卡片等元素，如卡片使用box-shadow: 10px 10px 20px #c9c9c9, -10px -10px 20px #ffffff。需注意其對(duì)比度低影響可讀性，陰影過(guò)多可能影響性能，且可能不符合WCAG可訪問(wèn)性標(biāo)準(zhǔn)，因此應(yīng)適度用於儀錶盤(pán)、音樂(lè)播放器等強(qiáng)調(diào)美感的靜態(tài)界面。

Neumorphism（新擬態(tài)）是一種UI 設(shè)計(jì)風(fēng)格，它通過(guò)柔和的陰影和背景色營(yíng)造出一種“從背景中浮起”或“凹陷”的視覺(jué)效果，看起來(lái)像物理按鈕。它結(jié)合了扁平化設(shè)計(jì)和擬物化設(shè)計(jì)的優(yōu)點(diǎn)，強(qiáng)調(diào)簡(jiǎn)潔但有立體感。

下面是一個(gè)簡(jiǎn)單的CSS Neumorphism 設(shè)計(jì)示例—— 一個(gè)典型的neumorphic 按鈕。

? 基本Neumorphic 按鈕示例

HTML

 <div class="neumorphic-button">Click Me</div>

CSS

 .neumorphic-button {
  width: 150px;
  height: 60px;
  background-color: #e0e0e0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  color: #555;
  cursor: pointer;

  /* 關(guān)鍵：使用box-shadow 製造內(nèi)外陰影效果*/
  box-shadow: 
    8px 8px 16px #c9c9c9,
    -8px -8px 16px #ffffff;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* 按下時(shí)的“凹陷”效果*/
.neumorphic-button:active {
  box-shadow: 
    inset 4px 4px 8px #c9c9c9,
    inset -4px -4px 8px #ffffff;
  transform: scale(0.98);
}

? 設(shè)計(jì)要點(diǎn)說(shuō)明

1.背景與元素顏色要接近

• 容器背景（如body）和按鈕背景顏色必須相近，才能實(shí)現(xiàn)“融合”感。
• 示例中body 背景建議也設(shè)為#e0e0e0或純淺灰。

 body {
  background-color: #e0e0e0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

2.雙陰影是關(guān)鍵

• 外陰影： 8px 8px 16px #c9c9c9 （右下深色）
• 外陰影： -8px -8px 16px #ffffff （左上亮色）
• 凹陷時(shí)用inset內(nèi)陰影反轉(zhuǎn)方向，製造“按下去”的感覺(jué)

3.圓角要柔和

• 推薦border-radius: 12px ~ 20px ，太尖銳會(huì)破壞風(fēng)格

4.避免使用邊框（border）

• 邊框會(huì)破壞“無(wú)縫融合”感，用陰影和顏色過(guò)渡代替

? 可擴(kuò)展的Neumorphic 元素類(lèi)型

你可以用類(lèi)似方式創(chuàng)建：

• 輸入框
• 開(kāi)關(guān)（Toggle）
• 卡片（Card）
• 數(shù)字鍵盤(pán)按鈕

例如一個(gè)neumorphic 卡片：

 .neumorphic-card {
  width: 200px;
  height: 120px;
  background-color: #e0e0e0;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 
    10px 10px 20px #c9c9c9,
    -10px -10px 20px #ffffff;
}

?? 注意事項(xiàng)

• 對(duì)比度低：Neumorphism 在小屏幕或強(qiáng)光下可讀性差，慎用於關(guān)鍵操作
• 過(guò)度使用陰影影響性能：尤其是移動(dòng)端
• 可訪問(wèn)性問(wèn)題：顏色對(duì)比不足可能不符合WCAG 標(biāo)準(zhǔn)

基本上就這些。這個(gè)風(fēng)格很“好看”，但要適度使用在合適的場(chǎng)景，比如儀錶盤(pán)、音樂(lè)播放器UI、設(shè)置面板等強(qiáng)調(diào)美感的靜態(tài)界面。

以上是CSS新形態(tài)設(shè)計(jì)示例的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！