Fluent 2 Design - Elevation CSS
筆記一下 Microsoft Fluent 2 Design 裡面定義的 Elevation Shadow 樣式
淺色主題
/* Low Elevation Ramp */ .fluent-light-shadow-2 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.14); } .fluent-light-shadow-4 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.14); } .fluent-light-shadow-8 { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.14); } .fluent-light-shadow-16 { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.14); } /* High Elevation Ramp */ .fluent-light-shadow-28 { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.20); } .fluent-light-shadow-64 { box-shadow: 0 32px 64px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.20); }
深色主題
/* Low Elevation Ramp */ .fluent-dark-shadow-2 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.14); } .fluent-dark-shadow-4 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.14); } .fluent-dark-shadow-8 { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.14); } .fluent-dark-shadow-16 { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28), 0 8px 16px rgba(0, 0, 0, 0.14); } /* High Elevation Ramp */ .fluent-dark-shadow-28 { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.20); } .fluent-dark-shadow-64 { box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.20); }
效果展示
2
4
8
16
28
64
2
4
8
16
28
64
留言
張貼留言