边框

边框颜色

用于控制元素边框颜色的功能类。

使用前缀

为了防止和开发者项目中的其他原子化样式语法冲突，样式库默认添加了前缀 lwu，使用示例如下：

vue

<view class="lwu-flex"></view>

语法

TIP

边框颜色已内置暗黑模式的支持
在边框颜色class后面紧跟 dark 即可实现暗黑模式，示例如下：
html
```
<view class="lwu-border-primary dark"></view>
```

Class	Properties	平台兼容性说明
border-transparent	border-color: transparent;	H5、小程序、app-vue
border-current	border-color: currentColor;	H5、小程序、app-vue、app-nvue
border-black	border-color: #000000;	H5、小程序、app-vue、app-nvue
border-white	border-color: #FFFFFF;	H5、小程序、app-vue、app-nvue

Grey / 中性灰

Class	Properties	平台兼容性说明
border-grey-0	border-color: #f7f8fa;	H5、小程序、app-vue、app-nvue
border-grey-1	border-color: #f2f3f5;	H5、小程序、app-vue、app-nvue
border-grey-2	border-color: #e5e6eb;	H5、小程序、app-vue、app-nvue
border-grey-3	border-color: #c9cdd4;	H5、小程序、app-vue、app-nvue
border-grey-4	border-color: #a9aeb8;	H5、小程序、app-vue、app-nvue
border-grey-5	border-color: #86909c;	H5、小程序、app-vue、app-nvue
border-grey-6	border-color: #6b7785;	H5、小程序、app-vue、app-nvue
border-grey-7	border-color: #4e5969;	H5、小程序、app-vue、app-nvue
border-grey-8	border-color: #272e3b;	H5、小程序、app-vue、app-nvue
border-grey-9	border-color: #1d2129;	H5、小程序、app-vue、app-nvue

Red / 浪漫红

Class	Properties	平台兼容性说明
border-red-0	border-color: #FFECE8;	H5、小程序、app-vue、app-nvue
border-red-1	border-color: #FDCDC5;	H5、小程序、app-vue、app-nvue
border-red-2	border-color: #FBACA3;	H5、小程序、app-vue、app-nvue
border-red-3	border-color: #F98981;	H5、小程序、app-vue、app-nvue
border-red-4	border-color: #F76560;	H5、小程序、app-vue、app-nvue
border-red-5	border-color: #F53F3F;	H5、小程序、app-vue、app-nvue
border-red-6	border-color: #CB272D;	H5、小程序、app-vue、app-nvue
border-red-7	border-color: #A1151E;	H5、小程序、app-vue、app-nvue
border-red-8	border-color: #770813;	H5、小程序、app-vue、app-nvue
border-red-9	border-color: #4D000A;	H5、小程序、app-vue、app-nvue

Orangered / 晚秋红

Class	Properties	平台兼容性说明
border-orangered-0	border-color: #FFF3E8;	H5、小程序、app-vue、app-nvue
border-orangered-1	border-color: #FDDDC3;	H5、小程序、app-vue、app-nvue
border-orangered-2	border-color: #FCC59F;	H5、小程序、app-vue、app-nvue
border-orangered-3	border-color: #FC7B;	H5、小程序、app-vue、app-nvue
border-orangered-4	border-color: #F99057;	H5、小程序、app-vue、app-nvue
border-orangered-5	border-color: #F77234;	H5、小程序、app-vue、app-nvue
border-orangered-6	border-color: #CC5120;	H5、小程序、app-vue、app-nvue
border-orangered-7	border-color: #A23511;	H5、小程序、app-vue、app-nvue
border-orangered-8	border-color: #771F06;	H5、小程序、app-vue、app-nvue
border-orangered-9	border-color: #4D0E00;	H5、小程序、app-vue、app-nvue

Orange / 活力橙

Class	Properties	平台兼容性说明
border-orange-0	border-color: #FFF7E8;	H5、小程序、app-vue、app-nvue
border-orange-1	border-color: #FFE4BA;	H5、小程序、app-vue、app-nvue
border-orange-2	border-color: #FFCF8B;	H5、小程序、app-vue、app-nvue
border-orange-3	border-color: #FFB65D;	H5、小程序、app-vue、app-nvue
border-orange-4	border-color: #FF9A2E;	H5、小程序、app-vue、app-nvue
border-orange-5	border-color: #FF7D00;	H5、小程序、app-vue、app-nvue
border-orange-6	border-color: #D25F00;	H5、小程序、app-vue、app-nvue
border-orange-7	border-color: #A64500;	H5、小程序、app-vue、app-nvue
border-orange-8	border-color: #792E00;	H5、小程序、app-vue、app-nvue
border-orange-9	border-color: #4D1B00;	H5、小程序、app-vue、app-nvue

Gold / 黄昏色

Class	Properties	平台兼容性说明
border-gold-0	border-color: #FFFCE8;	H5、小程序、app-vue、app-nvue
border-gold-1	border-color: #FDF4BF;	H5、小程序、app-vue、app-nvue
border-gold-2	border-color: #FCE996;	H5、小程序、app-vue、app-nvue
border-gold-3	border-color: #FADC6D;	H5、小程序、app-vue、app-nvue
border-gold-4	border-color: #F9CC45;	H5、小程序、app-vue、app-nvue
border-gold-5	border-color: #F7BA1E;	H5、小程序、app-vue、app-nvue
border-gold-6	border-color: #CC9213;	H5、小程序、app-vue、app-nvue
border-gold-7	border-color: #A26D0A;	H5、小程序、app-vue、app-nvue
border-gold-8	border-color: #774B04;	H5、小程序、app-vue、app-nvue
border-gold-9	border-color: #4D2D00;	H5、小程序、app-vue、app-nvue

Yellow / 柠檬黄

Class	Properties	平台兼容性说明
border-yellow-0	border-color: #FEFFE8;	H5、小程序、app-vue、app-nvue
border-yellow-1	border-color: #FEFEBE;	H5、小程序、app-vue、app-nvue
border-yellow-2	border-color: #FDFA94;	H5、小程序、app-vue、app-nvue
border-yellow-3	border-color: #FCF26B;	H5、小程序、app-vue、app-nvue
border-yellow-4	border-color: #FBE842;	H5、小程序、app-vue、app-nvue
border-yellow-5	border-color: #FADC19;	H5、小程序、app-vue、app-nvue
border-yellow-6	border-color: #CFAF0F;	H5、小程序、app-vue、app-nvue
border-yellow-7	border-color: #A38408;	H5、小程序、app-vue、app-nvue
border-yellow-8	border-color: #785D03;	H5、小程序、app-vue、app-nvue
border-yellow-9	border-color: #4D3800;	H5、小程序、app-vue、app-nvue

Lime / 新生绿

Class	Properties	平台兼容性说明
border-lime-0	border-color: #FCFFE8;	H5、小程序、app-vue、app-nvue
border-lime-1	border-color: #EDF8BB;	H5、小程序、app-vue、app-nvue
border-lime-2	border-color: #DCF190;	H5、小程序、app-vue、app-nvue
border-lime-3	border-color: #C9E968;	H5、小程序、app-vue、app-nvue
border-lime-4	border-color: #B5E241;	H5、小程序、app-vue、app-nvue
border-lime-5	border-color: #9FDB1D;	H5、小程序、app-vue、app-nvue
border-lime-6	border-color: #7EB712;	H5、小程序、app-vue、app-nvue
border-lime-7	border-color: #5F940A;	H5、小程序、app-vue、app-nvue
border-lime-8	border-color: #437004;	H5、小程序、app-vue、app-nvue
border-lime-9	border-color: #2A4D00;	H5、小程序、app-vue、app-nvue

Green / 翡翠绿

Class	Properties	平台兼容性说明
border-green-0	border-color: #E8FFF3;	H5、小程序、app-vue、app-nvue
border-green-1	border-color: #B0F2D2;	H5、小程序、app-vue、app-nvue
border-green-2	border-color: #7DE4B6;	H5、小程序、app-vue、app-nvue
border-green-3	border-color: #4ED79E;	H5、小程序、app-vue、app-nvue
border-green-4	border-color: #25C98A;	H5、小程序、app-vue、app-nvue
border-green-5	border-color: #00BC79;	H5、小程序、app-vue、app-nvue
border-green-6	border-color: #00A06D;	H5、小程序、app-vue、app-nvue
border-green-7	border-color: #00845F;	H5、小程序、app-vue、app-nvue
border-green-8	border-color: #00684E;	H5、小程序、app-vue、app-nvue
border-green-9	border-color: #004D3C;	H5、小程序、app-vue、app-nvue

Cyan / 碧涛青

Class	Properties	平台兼容性说明
border-cyan-0	border-color: #E8FFFB;	H5、小程序、app-vue、app-nvue
border-cyan-1	border-color: #B7F4EC;	H5、小程序、app-vue、app-nvue
border-cyan-2	border-color: #89E9E0;	H5、小程序、app-vue、app-nvue
border-cyan-3	border-color: #5EDFD6;	H5、小程序、app-vue、app-nvue
border-cyan-4	border-color: #37D4CF;	H5、小程序、app-vue、app-nvue
border-cyan-5	border-color: #14C9C9;	H5、小程序、app-vue、app-nvue
border-cyan-6	border-color: #0DA5;	H5、小程序、app-vue、app-nvue
border-cyan-7	border-color: #07828B;	H5、小程序、app-vue、app-nvue
border-cyan-8	border-color: #03616C;	H5、小程序、app-vue、app-nvue
border-cyan-9	border-color: #00424D;	H5、小程序、app-vue、app-nvue

Blue / 海空蓝

Class	Properties	平台兼容性说明
border-blue-0	border-color: #E8F7FF;	H5、小程序、app-vue、app-nvue
border-blue-1	border-color: #C3E7FE;	H5、小程序、app-vue、app-nvue
border-blue-2	border-color: #9FD4FD;	H5、小程序、app-vue、app-nvue
border-blue-3	border-color: #7BC0FC;	H5、小程序、app-vue、app-nvue
border-blue-4	border-color: #57A9FB;	H5、小程序、app-vue、app-nvue
border-blue-5	border-color: #3491FA;	H5、小程序、app-vue、app-nvue
border-blue-6	border-color: #206CCF;	H5、小程序、app-vue、app-nvue
border-blue-7	border-color: #114BA3;	H5、小程序、app-vue、app-nvue
border-blue-8	border-color: #063078;	H5、小程序、app-vue、app-nvue
border-blue-9	border-color: #001A4D;	H5、小程序、app-vue、app-nvue

Deepblue / 极致蓝

Class	Properties	平台兼容性说明
border-deepblue-0	border-color: #E8F3FF;	H5、小程序、app-vue、app-nvue
border-deepblue-1	border-color: #BEDAFF;	H5、小程序、app-vue、app-nvue
border-deepblue-2	border-color: #94BFFF;	H5、小程序、app-vue、app-nvue
border-deepblue-3	border-color: #61FF;	H5、小程序、app-vue、app-nvue
border-deepblue-4	border-color: #4080FF;	H5、小程序、app-vue、app-nvue
border-deepblue-5	border-color: #165DFF;	H5、小程序、app-vue、app-nvue
border-deepblue-6	border-color: #0E42D2;	H5、小程序、app-vue、app-nvue
border-deepblue-7	border-color: #072CA6;	H5、小程序、app-vue、app-nvue
border-deepblue-8	border-color: #031A79;	H5、小程序、app-vue、app-nvue
border-deepblue-9	border-color: #000D4D;	H5、小程序、app-vue、app-nvue

Purple / 暗夜紫

Class	Properties	平台兼容性说明
border-purple-0	border-color: #F5E8FF;	H5、小程序、app-vue、app-nvue
border-purple-1	border-color: #DDBEF6;	H5、小程序、app-vue、app-nvue
border-purple-2	border-color: #C396ED;	H5、小程序、app-vue、app-nvue
border-purple-3	border-color: #A871E3;	H5、小程序、app-vue、app-nvue
border-purple-4	border-color: #8D4EDA;	H5、小程序、app-vue、app-nvue
border-purple-5	border-color: #722ED1;	H5、小程序、app-vue、app-nvue
border-purple-6	border-color: #551DB0;	H5、小程序、app-vue、app-nvue
border-purple-7	border-color: #3C108F;	H5、小程序、app-vue、app-nvue
border-purple-8	border-color: #27066E;	H5、小程序、app-vue、app-nvue
border-purple-9	border-color: #16004D;	H5、小程序、app-vue、app-nvue

Pinkpurple / 青春紫

Class	Properties	平台兼容性说明
border-pinkpurple-0	border-color: #FFE8FB;	H5、小程序、app-vue、app-nvue
border-pinkpurple-1	border-color: #F7BAEF;	H5、小程序、app-vue、app-nvue
border-pinkpurple-2	border-color: #F08EE6;	H5、小程序、app-vue、app-nvue
border-pinkpurple-3	border-color: #E865DF;	H5、小程序、app-vue、app-nvue
border-pinkpurple-4	border-color: #E13EDB;	H5、小程序、app-vue、app-nvue
border-pinkpurple-5	border-color: #D91AD9;	H5、小程序、app-vue、app-nvue
border-pinkpurple-6	border-color: #B010B6;	H5、小程序、app-vue、app-nvue
border-pinkpurple-7	border-color: #8A0993;	H5、小程序、app-vue、app-nvue
border-pinkpurple-8	border-color: #650370;	H5、小程序、app-vue、app-nvue
border-pinkpurple-9	border-color: #42004D;	H5、小程序、app-vue、app-nvue

magenta / 品红色

Class	Properties	平台兼容性说明
border-magenta-0	border-color: #FFE8F1;	H5、小程序、app-vue、app-nvue
border-magenta-1	border-color: #FDC2DB;	H5、小程序、app-vue、app-nvue
border-magenta-2	border-color: #FB9DC7;	H5、小程序、app-vue、app-nvue
border-magenta-3	border-color: #F979B7;	H5、小程序、app-vue、app-nvue
border-magenta-4	border-color: #F754A8;	H5、小程序、app-vue、app-nvue
border-magenta-5	border-color: #F5319D;	H5、小程序、app-vue、app-nvue
border-magenta-6	border-color: #CB1E83;	H5、小程序、app-vue、app-nvue
border-magenta-7	border-color: #A11069;	H5、小程序、app-vue、app-nvue
border-magenta-8	border-color: #77064F;	H5、小程序、app-vue、app-nvue
border-magenta-9	border-color: #4D0034;	H5、小程序、app-vue、app-nvue

功能色

使用场景

0-白底悬浮
1-文字禁用
2-一般禁用
3-特殊场景
5-常规使用
6-点击状态

Primary-品牌色

Class	Properties	平台兼容性说明
border-primary-0	border-color: #E8FFF3;	H5、小程序、app-vue、app-nvue
border-primary-1	border-color: #B0F2D2;	H5、小程序、app-vue、app-nvue
border-primary-2	border-color: #7DE4B6;	H5、小程序、app-vue、app-nvue
border-primary-3	border-color: #4ED79E;	H5、小程序、app-vue、app-nvue
border-primary-5	border-color: #00BC79;	H5、小程序、app-vue、app-nvue
border-primary-6	border-color: #00A06D;	H5、小程序、app-vue、app-nvue

Success-成功色

Class	Properties	平台兼容性说明
border-success-0	border-color: #E8FFF3;	H5、小程序、app-vue、app-nvue
border-success-1	border-color: #B0F2D2;	H5、小程序、app-vue、app-nvue
border-success-2	border-color: #7DE4B6;	H5、小程序、app-vue、app-nvue
border-success-3	border-color: #4ED79E;	H5、小程序、app-vue、app-nvue
border-success-5	border-color: #00BC79;	H5、小程序、app-vue、app-nvue
border-success-6	border-color: #00A06D;	H5、小程序、app-vue、app-nvue

Danger / 危险色

Class	Properties	平台兼容性说明
border-danger-0	border-color: #FFECE8;	H5、小程序、app-vue、app-nvue
border-danger-1	border-color: #FDCDC5;	H5、小程序、app-vue、app-nvue
border-danger-2	border-color: #FBACA3;	H5、小程序、app-vue、app-nvue
border-danger-3	border-color: #F98981;	H5、小程序、app-vue、app-nvue
border-danger-5	border-color: #F53F3F;	H5、小程序、app-vue、app-nvue
border-danger-6	border-color: #CB272D;	H5、小程序、app-vue、app-nvue

Warning / 警告色

Class	Properties	平台兼容性说明
border-warning-0	border-color: #FFF7E8;	H5、小程序、app-vue、app-nvue
border-warning-1	border-color: #FFE4BA;	H5、小程序、app-vue、app-nvue
border-warning-2	border-color: #FFCF8B;	H5、小程序、app-vue、app-nvue
border-warning-3	border-color: #FFB65D;	H5、小程序、app-vue、app-nvue
border-warning-5	border-color: #FF7D00;	H5、小程序、app-vue、app-nvue
border-warning-6	border-color: #D25F00;	H5、小程序、app-vue、app-nvue

Link / 链接色

Class	Properties	平台兼容性说明
border-link-0	border-color: #E8F7FF;	H5、小程序、app-vue、app-nvue
border-link-1	border-color: #C3E7FE;	H5、小程序、app-vue、app-nvue
border-link-2	border-color: #9FD4FD;	H5、小程序、app-vue、app-nvue
border-link-3	border-color: #7BC0FC;	H5、小程序、app-vue、app-nvue
border-link-5	border-color: #3491FA;	H5、小程序、app-vue、app-nvue
border-link-6	border-color: #206CCF;	H5、小程序、app-vue、app-nvue

Info / 信息色

Class	Properties	平台兼容性说明
border-info-0	border-color: #E8F7FF;	H5、小程序、app-vue、app-nvue
border-info-1	border-color: #C3E7FE;	H5、小程序、app-vue、app-nvue
border-info-2	border-color: #9FD4FD;	H5、小程序、app-vue、app-nvue
border-info-3	border-color: #7BC0FC;	H5、小程序、app-vue、app-nvue
border-info-5	border-color: #3491FA;	H5、小程序、app-vue、app-nvue
border-info-6	border-color: #206CCF;	H5、小程序、app-vue、app-nvue

边框 ​

边框颜色 ​

使用前缀 ​

语法 ​

Grey / 中性灰 ​

Red / 浪漫红 ​

Orangered / 晚秋红 ​

Orange / 活力橙 ​

Gold / 黄昏色 ​

Yellow / 柠檬黄 ​

Lime / 新生绿 ​

Green / 翡翠绿 ​

Cyan / 碧涛青 ​

Blue / 海空蓝 ​

Deepblue / 极致蓝 ​

Purple / 暗夜紫 ​

Pinkpurple / 青春紫 ​

magenta / 品红色 ​

功能色 ​

Primary-品牌色 ​

Success-成功色 ​

Danger / 危险色 ​

Warning / 警告色 ​

Link / 链接色 ​

Info / 信息色 ​

边框

边框颜色

使用前缀

语法

Grey / 中性灰

Red / 浪漫红

Orangered / 晚秋红

Orange / 活力橙

Gold / 黄昏色

Yellow / 柠檬黄

Lime / 新生绿

Green / 翡翠绿

Cyan / 碧涛青

Blue / 海空蓝

Deepblue / 极致蓝

Purple / 暗夜紫

Pinkpurple / 青春紫

magenta / 品红色

功能色

Primary-品牌色

Success-成功色

Danger / 危险色

Warning / 警告色

Link / 链接色

Info / 信息色