前言
作为前端开发者，我们经常需要使用大量的 UI 元素来构建一个页面。其中，一个元素的阴影效果是经常用到的，比如卡片、按钮、对话框等。然而，为了实现一个简单的阴影效果，我们需要编写繁琐的样式代码，尤其是在处理跨浏览器兼容性时，会让我们更为困惑。为了避免这些麻烦，这里向大家介绍一个实用的npm包@beezydev/elevation。
@beezydev/elevation 简介
@beezydev/elevation 是一个 Node.js 模块，提供了一系列方便的 CSS 类，可用于为 UI 元素添加阴影效果。其提供的阴影效果共有 25 个级别，可以根据实际情况进行选择，从而减轻前端开发的负担。
安装方法
可以使用 npm 包管理器全局安装 @beezydev/elevation。
npm install -g @beezydev/elevation
也可以在项目中本地安装：
npm install @beezydev/elevation
快速上手
为了使用 @beezydev/elevation，我们需要在 HTML 元素中添加一些 CSS 类。示例如下：
<div class="beezy-elevation-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque faucibus feugiat. </div>
如上所示，我们将一个 <div> 元素外层包裹了一个 CSS 类为 beezy-elevation-2 的 <div> 元素。这样，就可以为该元素添加一个具有 2 级阴影效果的样式。
在应用中，我们可以为该元素指定任意阴影级别，只需在 CSS 类名中修改数字即可。例如，要为该元素添加 6 级阴影效果，我们只需要将 CSS 类名修改为 beezy-elevation-6。
另外，我们还可以通过不同的 CSS 属性分别控制阴影的颜色和大小。具体来说，我们可以使用box-shadow 属性来控制阴影的颜色和大小。
.beezy-elevation-2 {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.16);
}如上所示，我们将 box-shadow 属性添加到 .beezy-elevation-2 类中，并分别指定了阴影的颜色和大小，其中包含两个参数，分别是 x-offset 和 y-offset，表示阴影距离元素的水平和垂直距离；第三个参数表示阴影半径；最后一个参数表示阴影透明度。
手动修改
可以在 node_modules/@beezydev/elevation/dist 目录下找到 elevation.min.css 文件。该文件包含了所有 @beezydev/elevation 提供的 CSS 类。我们可以在该文件中手动修改阴影效果的 CSS 属性或者增加自己的阴影效果。这样，我们可以针对实际应用情况，定制自己需要的阴影样式。
结语
在本文中，我们介绍了如何使用 @beezydev/elevation npm 模块，实现一个简单的阴影效果。不仅仅是在阴影效果的实现上，我们还可以了解到如何使用一个 npm 模块，实际上前端开发过程中，使用第三方库可以显著提高我们的开发效率，我们应该尝试更多的使用优秀的第三方库，使我们的开发更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111841