menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

阴影

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 鼠标悬浮时加深阴影