阴影 - MDUI 开发文档, Material Design 前端框架

阴影

MDUI 提供了 24 种不同深度的阴影，可以满足 Material Design 中任意场景的需求。

添加阴影

只需在元素上添加类 .mdui-shadow-[1-24]，元素就会拥有对应深度的阴影。添加类 .mdui-shadow-0 则可以移除阴影。

请拖动下方滑块来观察不同深度的阴影变化。

鼠标悬浮时加深阴影

在任何元素上添加类 .mdui-hoverable，就能在鼠标悬浮时使阴影加深。

Example

<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 类名列表