前言
在前端开发中，设计中阴影效果的显示通常会使用 box-shadow 属性。但是，很多开发者会发现 box-shadow 在某些情况下无法达到效果所需的阴影效果，因此，一些前端工程师开发了 md-shadows 这个 npm 包。
本文将介绍如何使用 md-shadows，帮助读者更好的实现阴影效果。
什么是 npm 包 md-shadows？
md-shadows 是一个 npm 包，专门用于实现 Material Design 预定义的阴影效果，而不需要编写繁琐的 CSS 样式。
md-shadows 支持多种类型的阴影效果，从简单与扁平到立体与鲜艳，每种阴影常常有不同的浓度和变化。
md-shadows 模块化组件, 支持各种前端框架。你可以轻松的在你的 React, Vue 或 Angular 项目中使用它。
获取和安装 md-shadows
你可以在 npm 官网 https://www.npmjs.com/package/md-shadows 获取到 md-shadows。
在你的项目根目录下，使用以下命令安装 md-shadows：
--- ------- ----------
md-shadows 使用教程
在你需要使用阴影效果的 HTML 元素上，添加以下 CSS 样式即可：
----------- ------------
此外，你还可以使用下面的代码实现其他阴影效果：
----------- ------------ ----------- ------------ ----------- ------------ ----------- ------------ ----------- ------------ ----------- ------------ ----------- ------------ ----------- ------------ ----------- ------------- ----------- ------------- ----------- ------------- ----------- ------------- ----------- ------------- ----------- ------------- ----------- ------------- ----------- ------------- ----------- ------------- ----------- ------------- ----------- -------------
现在，你已经掌握了如何使用 md-shadows 的技巧了。
示例代码
以下是如何在你的 HTML 元素中使用 md-shadows：
--------- -----
------
------
-----------------------------
-------
---- -
------ ------
------- ------
----------------- --------
-------------- ----
----------- ------------ -- -- ----------- ------ --
-
--------
-------
------
---- ------------------
-------
-------总结
本文详细介绍了如何使用 md-shadows，md-shadows 可以大大减少前端工程师在实现阴影效果的过程中所需要编写的 CSS 样式，同时提高效率。
下次开发中，如果你需要实现 Material Design 预定义的阴影效果，不妨使用 md-shadows。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600551ed81e8991b448cf635