前端开发中，我们经常需要对页面元素的边框进行美化，为此我们可以使用一些 CSS 技术来实现。不过，如果每个页面都手写 CSS 样式，代码量将会非常大，而且难以维护。为解决这个问题，我们可以使用 npm 上的 @savvy-css/border-garnishes 包，它能够方便地为页面元素添加美化边框。
安装
首先，我们需要通过 npm 安装 @savvy-css/border-garnishes 包。打开终端，进入项目目录，输入以下命令：
npm install @savvy-css/border-garnishes
使用
在安装完毕之后，我们就可以在项目中使用 @savvy-css/border-garnishes 包了。接下来，我们通过一个简单的示例来说明如何使用。
首先，我们需要在 HTML 文件中引入所需的 CSS 文件：
<link rel="stylesheet" href="./node_modules/@savvy-css/border-garnishes/dist/savvy-border-garnishes.min.css">
然后，我们就可以在页面中使用 @savvy-css/border-garnishes 提供的 class 来实现美化边框。例如，如果我们想要为一个 div 元素添加一个红色双线框边框，我们只需要在 div 元素的 class 中添加 savvy-double-border-red 类即可：
<div class="savvy-double-border-red">我是一个 div 元素</div>
除了 savvy-double-border-red 类，@savvy-css/border-garnishes 还提供了多种边框样式的类，可以实现单线框、虚线框、圆角框等多种形式的美化边框，具体请参考文档。
示例
下面是一个完整的示例，展示了如何使用 @savvy-css/border-garnishes 包为一个 div 元素添加双线框边框。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- --------------------------- ---------
----- ---------------- --------------------------------------------------------------------------------------
-------
------
---- ------------------------------------ --- --------
-------
-------总结
通过本文的介绍，我们了解到了如何使用 @savvy-css/border-garnishes 包来美化页面元素的边框。该包提供了多种边框样式的 class，非常方便实用。在实际开发中，我们可以通过这种方式来提高页面的美观程度，减少代码量，提高开发效率，是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc36d