什么是 bevel
bevel 是一个 npm 包，它提供了一种简单的方法来为网页中的文本添加 3D 效果。该包是一个轻量级的 JavaScript 库，不依赖于其他库，可以直接在浏览器中使用。
bevel 支持设定文本边缘的颜色、宽度、倾斜度和透明度等属性，可以轻松实现 3D 边缘效果，且不需要编写任何 CSS 或者 SVG，非常实用。
如何使用 bevel
安装
首先，需要在计算机中安装 Node.js 和 npm。安装完成之后，在命令行中输入以下命令来安装 bevel：
npm install bevel
引入和使用
在使用 bevel 之前，需要先在 HTML 文件中引入该库：
<script src="node_modules/bevel/index.js"></script>
然后，在 JavaScript 文件中，可以使用如下代码来将文本添加 3D 边缘效果：
var elem = document.querySelector('.text');
bevel(elem, {
thickness: 10,
angle: 45,
color: '#ff0000'
});这里，我们选择了一个 class 名称为 .text 的元素，然后调用了 bevel() 函数，并传入了一些属性，比如厚度、倾斜度和颜色。
属性
bevel() 函数可以接受以下属性：
- thickness：边缘的粗细度，默认为 5px。
- angle：边缘的倾斜度，默认为 45。
- color：边缘的颜色，默认为黑色。
除上述属性外，还可以通过传递一个选项对象来传递其他属性，包括：
- top：顶部边缘的粗细度，默认和 thickness 相同。
- right：右侧边缘的粗细度，默认和 thickness 相同。
- bottom：底部边缘的粗细度，默认和 thickness 相同。
- left：左侧边缘的粗细度，默认和 thickness 相同。
示例代码
以下是一个简单的示例代码，可以直接在浏览器中运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ----------
-------
------
--- ------------------- -- ------------
------- -------------------------------------------
--------
--- ---- - --------------------------------
----------- -
---------- ---
------ ---
------ ---------
---
---------
-------
-------结论
bevel 是一个实用的 npm 包，它可以让前端开发者非常方便地为网页文本添加 3D 边缘效果。使用 bevel 可以让页面看起来更加美观，深受开发者的喜爱。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562cd81e8991b448e016a