基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

陰影

mdui 提供了 24 種不同深度的陰影，可以滿足 Material Design 中任意情境的需求。

加入陰影

只需在元素上加入類別 .mdui-shadow-[1-24]，元素就會擁有對應深度的陰影。加入類別 .mdui-shadow-0 則可以移除陰影。

請拖動下方滑桿來觀察不同深度的陰影變化。

滑鼠懸停時加深陰影

在任何元素上加入類別 .mdui-hoverable，就能在滑鼠懸停時使陰影加深。

範例

<div class="mdui-card mdui-hoverable">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

CSS 類別清單

類別名稱	說明
`.mdui-shadow-0`	移除陰影
`.mdui-shadow-[1-24]`	加入不同深度的陰影
`.mdui-hoverable`	滑鼠懸停時加深陰影

輔助類別

漣漪效果

陰影

相關閱讀

加入陰影

滑鼠懸停時加深陰影

CSS 類別清單