什么是新擬態
新擬態的英文名稱是“Neumorphism”，也有人稱為“Soft UI”。
簡單講，新擬態是一種圖形樣式，其原理是通過模擬真實物體來為界面的UI元素賦予真實感。
新擬態風格起源于dribbble，后面陸續被收錄在2020設計趨勢預測里面，在2019年的年末慢慢被大家熟知，討論，重視起來。
好吧以上都是我在網上抄的。
這些是我在網上找的一些效果圖：
其原理是：將卡片設置與背景相同的顏色，然后利用卡片陰影來實現視覺上的 [突起] 或 [凹陷] 的效果。我們要做的，就是利用CSS陰影畫一個新擬態風格的鍵盤，最終成品如下：
準備工作
在開始畫鍵盤之前，先觀察一下鍵盤的基本布局（注意這里我們不繪制小鍵盤部分，因為現在我手上的鍵盤是87鍵的哈哈哈）。可以看出鍵盤布局基本上可以看作是一個規則的柵格系統，總共6行18列，非常適合使用grid布局來實現，退格、shift、空格等較大按鍵的單元將占有多個列，沒有按鍵的位置放一個空單元即可。至此可以得到一個頁面結構：
<div class="keyboard"><div class="cell"><div class="key">Esc</div></div><div class="cell"></div><div class="cell"><div class="key">F1</div></div><div class="cell"><div class="key">F2</div></div><div class="cell"><div class="key">F3</div></div><div class="cell"><div class="key">F4</div></div><div class="cell"></div><div class="cell"><div class="key">F5</div></div><div class="cell"><div class="key">F6</div></div><div class="cell"><div class="key">F7</div></div><div class="cell"><div class="key">F8</div></div><div class="cell"></div><div class="cell"><div class="key">F9</div></div><div class="cell"><div class="key">F10</div></div><div class="cell"><div class="key">F11</div></div><div class="cell"><div class="key">F12</div></div><div class="cell"><div class="key">SrcLk</div></div><div class="cell"><div class="key">Pause</div></div><div class="cell"><div class="key">~</div></div><div class="cell"><div class="key">1</div></div><div class="cell"><div class="key">2</div></div><div class="cell"><div class="key">3</div></div><div class="cell"><div class="key">4</div></div><div class="cell"><div class="key">5</div></div><div class="cell"><div class="key">6</div></div><div class="cell"><div class="key">7</div></div><div class="cell"><div class="key">8</div></div><div class="cell"><div class="key">9</div></div><div class="cell"><div class="key">0</div></div><div class="cell"><div class="key">-</div></div><div class="cell"><div class="key">=</div></div><div class="cell backspace"><div class="key">Backspace</div></div><div class="cell"><div class="key">Ins</div></div><div class="cell"><div class="key">Home</div></div><div class="cell"><div class="key">PgUp</div></div><div class="cell tab"><div class="key">Tab</div></div><div class="cell"><div class="key">Q</div></div><div class="cell"><div class="key">W</div></div><div class="cell"><div class="key">E</div></div><div class="cell"><div class="key">R</div></div><div class="cell"><div class="key">T</div></div><div class="cell"><div class="key">Y</div></div><div class="cell"><div class="key">U</div></div><div class="cell"><div class="key">I</div></div><div class="cell"><div class="key">O</div></div><div class="cell"><div class="key">P</div></div><div class="cell"><div class="key">[{</div></div><div class="cell"><div class="key">]}</div></div><div class="cell"><div class="key">|</div></div><div class="cell"><div class="key">Del</div></div><div class="cell"><div class="key">End</div></div><div class="cell"><div class="key">PgDn</div></div><div class="cell caps"><div class="key">Caps</div></div><div class="cell"><div class="key">A</div></div><div class="cell"><div class="key">S</div></div><div class="cell"><div class="key">D</div></div><div class="cell"><div class="key">F</div></div><div class="cell"><div class="key">G</div></div><div class="cell"><div class="key">H</div></div><div class="cell"><div class="key">J</div></div><div class="cell"><div class="key">K</div></div><div class="cell"><div class="key">L</div></div><div class="cell"><div class="key">;:</div></div><div class="cell"><div class="key">'"</div></div><div class="cell enter"><div class="key">Enter</div></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell shift-left"><div class="key">Shift</div></div><div class="cell"><div class="key">Z</div></div><div class="cell"><div class="key">X</div></div><div class="cell"><div class="key">C</div></div><div class="cell"><div class="key">V</div></div><div class="cell"><div class="key">B</div></div><div class="cell"><div class="key">N</div></div><div class="cell"><div class="key">M</div></div><div class="cell"><div class="key">,<</div></div><div class="cell"><div class="key">.></div></div><div class="cell"><div class="key">/?</div></div><div class="cell shift-right"><div class="key">Shift</div></div><div class="cell"></div><div class="cell"><div class="key">↑</div></div><div class="cell"></div><div class="cell"><div class="key">Ctrl</div></div><div class="cell"><div class="key">Win</div></div><div class="cell"><div class="key">Alt</div></div><div class="cell space"><div class="key"></div></div><div class="cell"><div class="key">Alt</div></div><div class="cell"><div class="key">Win</div></div><div class="cell"><div class="key">Fn</div></div><div class="cell"><div class="key">Ctrl</div></div><div class="cell"><div class="key">←</div></div><div class="cell"><div class="key">↓</div></div><div class="cell"><div class="key">→</div></div>
</div>
CSS實現
首先是設置背景樣式：
html, body {height: 100%;background-color: #55b9f3;display: flex;justify-content: center;align-items: center;
}鍵盤的容器部分，注意鍵盤背景色需要與背景顏色一致，然后利用grid布局將鍵盤切割為6行18列：
.keyboard {width: 960px;height: 280px;padding: 10px;border-radius: 10px;background-color: #55b9f3;box-shadow: -20px -20px 60px #489dcf, 20px 20px 60px #62d5ff;display: grid;grid-template-columns: repeat(18, 1fr);grid-template-rows: repeat(6, 1fr);
}之后給每一個按鍵添加樣式，對于退格、空格等特殊的鍵，需要特別為他們設置大小：
.cell {padding: 4px;
}.key {width: 100%;height: 100%;color: #aedbf5;font-size: 13px;display: flex;justify-content: center;align-items: center;border-radius: 10px;background: linear-gradient(315deg, #4da7db, #5bc6ff);box-shadow: -1px -1px 40px #489dcf, 1px 1px 40px #62d5ff;transition: background .3s;cursor: pointer;user-select: none;
}.backspace {grid-column: 14 / 16;
}
.tab {grid-column: 1 / 3;
}
.caps {grid-column: 1 / 3;
}
.enter {grid-column: 14 / 16;
}
.shift-left {grid-column: 1 / 4;
}
.shift-right {grid-column: 14 / 16;
}
.space {grid-column: 4 / 12;
}最后，給按鍵添加一個按下時的樣式即可：
.key:active {background: linear-gradient(315deg, #5bc6ff, #4da7db);
}到此為止，整個案例就完成了。
完整代碼看這里?codepen.io結尾
最后推薦一個用來生成新擬態風格CSS代碼的網站：
Neumorphism/Soft UI CSS shadow generator?neumorphism.io
)
