在前端开发中，样式是一个重要的部分。CSS 技术是定制 HTML 样式的关键。其中，阴影样式是 Web 开发中一个经常使用的特效，可以通过设置不同的阴影组合来实现新颖而优雅的视觉效果。
@savvy-css/box-shadow-garnishes 是一个可用于生成 Web 页面上的阴影效果的 npm 包，它提供多种阴影样式，可以直接在样式文件中引用。本文将介绍如何使用这个包。
安装
要使用 @savvy-css/box-shadow-garnishes，首先需要在项目中使用包管理器 npm 安装它。打开终端并输入以下代码即可安装：
npm i @savvy-css/box-shadow-garnishes
这将下载包并保存到您的项目目录中。
使用
成功安装后，我们可以将其导入到项目中。可以在样式文件中使用它，例如 index.css。
@import '@savvy-css/box-shadow-garnishes/build/index.min.css';
现在，我们就可以使用这个 npm 包中所提供的多种阴影样式了。可以在 HTML 元素中应用这些样式。
<div class="sg-bxshdw-garnish-dark pink"></div>
以上代码展示了如何在 HTML 元素上应用阴影样式。Class sg-bxshdw-garnish-dark 表示应用了一种深色阴影样式，同时 pink 表示有一层级能够提供品牌特征的淡粉色衬底。根据具体的需求，可以选择不同的类来实现不同的阴影效果。
示例
下面是一个完整的示例，以供参考：
index.html:
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------------- ----------
----- ---------------- -------------------
-------
------
---- ------------------------------ ----------------------------- --------
----------------
--------------- ------------------------------- ---------------------------------------
------
---- ----------------------------- ------
--------------
--------------------------------------------
------
---- --------------------------------- ------
--------------
----------------------------------------------------------
------
-------
-------index.css:
-- -------------------- ---- -------
------- ------------------------------------------------------
------------------------ -
------ ----
-------- -----
------- - -----
-
----------------------- -
------ ----
-------- -----
------- - -----
-
--------------------------- -
------ ----
-------- -----
------- - -----
-
------- -
----------------- --------
------ -----
-
----- -
----------------- --------
------ -----
-总结
@savvy-css/box-shadow-garnishes 是一个非常有用的 npm 包，它可以为我们提供多种阴影样式，并且可以根据不同的需求，在项目中选择特定的阴影样式。本文介绍了如何在项目中安装和使用它，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aaa81e8991b448d8382