menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
widgets
组件
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

阴影

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