背景
在前端开发当中，我们经常需要设置元素的边框效果，这不仅是装饰性的需求，同时也是 UI 设计中一项很重要的要求。然而，在实际开发中，我们发现 CSS 中的边框样式并不总能满足我们的需求，或者我们经常需要定制一些边框样式，但又不希望每次都从头开始编写 CSS。
因此，有很多优秀的 CSS 框架和工具库，例如 Bootstrap、Foundation、Material Design Lite 等，这些工具库都提供了丰富的边框样式，帮助我们快速地搭建出美观、统一的 UI 界面。
今天，我将介绍一款叫做 basscss-border 的 npm 包，它是一个轻量、易用且高度可定制的边框样式库，可以帮助我们快速地开发大量不同样式的边框效果。在本文中，我将详细介绍如何使用这个库，包括安装、标准用法、高级应用示例等内容。
安装
首先，进入你的项目目录，并使用 npm 安装 basscss-border：
npm install basscss-border --save
安装完成之后，你就可以在你的项目中使用这个库了。
标准用法
basscss-border 使用非常简单，你只需要加入对应的 CSS 类名即可实现不同的边框效果。下面是这个库中支持的所有类名及其对应的效果：
| 类名 | 效果 |
|---|---|
br |
实心圆形边框 |
br--top |
实心圆形边框（上） |
br--right |
实心圆形边框（右） |
br--bottom |
实心圆形边框（下） |
br--left |
实心圆形边框（左） |
b--dashed |
虚线边框 |
b--dotted |
点线边框 |
b--solid |
实线边框 |
b--none |
无边框 |
b--black |
黑色实线边框 |
b--white |
白色实线边框 |
b--blue |
蓝色实线边框 |
b--green |
绿色实线边框 |
b--red |
红色实线边框 |
b--yellow |
黄色实线边框 |
b--purple |
紫色实线边框 |
b--gray |
灰色实线边框 |
b--light |
淡色实线边框 |
b--base |
基础色实线边框 |
b--inset |
凹陷实线边框（内阴影效果） |
b--outset |
凸起实线边框（外阴影效果） |
例如，如果需要一个红色实线边框，只需要在元素上添加 b--red b--solid 两个类名即可：
<div class="b--red b--solid">Hello, world!</div>
高级应用
basscss-border 还支持很多高度可定制的边框效果。下面是一些常用的高级应用示例：
使用自定义颜色
你可以通过添加自定义后缀来快速地定义一些新的边框颜色：
<div class="b--custom">Hello, world!</div>
.b--custom {
border-color: #ff00ff;
}定义圆角大小
如果你想改变边框的圆角大小，只需要添加圆角大小的后缀即可：
<div class="br--large">Hello, world!</div>
.br--large {
border-radius: 20px;
}使用凹陷边框
凹陷边框可以给元素添加内阴影效果，让元素看起来更加立体：
<div class="b--inset">Hello, world!</div>
.b--inset {
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
}使用多重边框
多重边框可以让一个元素拥有多个不同的边框效果，也可以应用于需要同一元素应用多个不同样式的情况。比如，下面的示例演示了怎样在一个元素上同时应用实线边框和凸起边框：
<div class="b--solid b--light b--outset">Hello, world!</div>
结语
basscss-border 是一个非常实用的 npm 包，它提供了很多有用的边框样式，可以帮助我们更快速地开发出美观、复杂的 UI 界面。本文中，我们介绍了如何安装和使用这个库，并提供了一些高级应用的示例，帮助大家更好地掌握这个工具。我相信，通过学习本文，你已经可以快速上手 basscss-border，并在实际开发中大显身手了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedd618bb4e78292a6fb8af