CSS新形態設計示例

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

Neumorphism（新擬態）是一種UI 設計風格，它通過柔和的陰影和背景色營造出一種“從背景中浮起”或“凹陷”的視覺效果，看起來像物理按鈕。它結合了扁平化設計和擬物化設計的優點，強調簡潔但有立體感。

下面是一個簡單的CSS Neumorphism 設計示例—— 一個典型的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;

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

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

? 設計要點說明

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

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

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

2.雙陰影是關鍵

• 外陰影： 8px 8px 16px #c9c9c9 （右下深色）
• 外陰影： -8px -8px 16px #ffffff （左上亮色）
• 凹陷時用inset內陰影反轉方向，製造“按下去”的感覺

3.圓角要柔和

• 推薦border-radius: 12px ~ 20px ，太尖銳會破壞風格

4.避免使用邊框（border）

• 邊框會破壞“無縫融合”感，用陰影和顏色過渡代替

? 可擴展的Neumorphic 元素類型

你可以用類似方式創建：

• 輸入框
• 開關（Toggle）
• 卡片（Card）
• 數字鍵盤按鈕

例如一個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;
}

⚠️ 注意事項

• 對比度低：Neumorphism 在小屏幕或強光下可讀性差，慎用於關鍵操作
• 過度使用陰影影響性能：尤其是移動端
• 可訪問性問題：顏色對比不足可能不符合WCAG 標準

基本上就這些。這個風格很“好看”，但要適度使用在合適的場景，比如儀錶盤、音樂播放器UI、設置面板等強調美感的靜態界面。

以上是CSS新形態設計示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！