返回介绍

阴影效果

发布于 2020-02-15 17:34:04 字数 962 浏览 861 评论 0 收藏 0

在这个框架中,每一个元素都一个 z 方向的深度,这个决定了这个元素是远离页面还是贴近页面。

你可以很简单的应用一个阴影效果,通过增加 class="z-depth-2" 类到 HTML 标签中。或者你可以继承这些阴影通过 Sass,通过使用 @extend .z-depth-2. A z-depth-0 来移除元素原有的深度的阴影。

<div class="col s12 m2">
<p class="z-depth-1">z-depth-1</p>
    </div>
    <div class="col s12 m2">
<p class="z-depth-2">z-depth-2</p>
    </div>
    <div class="col s12 m2">
<p class="z-depth-3">z-depth-3</p>
    </div>
    <div class="col s12 m2">
<p class="z-depth-4">z-depth-4</p>
    </div>
    <div class="col s12 m2">
<p class="z-depth-5">z-depth-5</p>
    </div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文