Color 颜色
文本颜色
使用 vus-color--* 类，为文本添加指定颜色。
状态颜色
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-color--primary | #409eff | 首选、主要 |
| vus-color--success | #67c23a | 成功 |
| vus-color--warning | #e6a23c | 警告 |
| vus-color--danger | #dd5544 | 危险 |
| vus-color--error | #ec0000 | 出错 |
| vus-color--info | #708090 | 信息 |
主要
vus-color--primary
成功
vus-color--success
警告
vus-color--warning
危险
vus-color--danger
出错
vus-color--error
信息
vus-color--info
<div class="vus-color--primary"></div>
<div class="vus-color--success"></div>
<div class="vus-color--warning"></div>
<div class="vus-color--danger"></div>
<div class="vus-color--error"></div>
<div class="vus-color--info"></div>
暗黑色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-color--black | #000000 | 黑色 |
| vus-color--black2 | #111111 | 黑色 2 |
| vus-color--black3 | #222222 | 黑色 3 |
| vus-color--dark | #333333 | 暗黑 |
| vus-color--dark2 | #444444 | 暗黑 2 |
| vus-color--dark3 | #555555 | 暗黑 3 |
黑色
vus-color--black
黑色 2
vus-color--black2
黑色 3
vus-color--black3
暗黑
vus-color--dark
暗黑 2
vus-color--dark2
暗黑 3
vus-color--dark3
<div class="vus-color--black"></div>
<div class="vus-color--black2"></div>
<div class="vus-color--black3"></div>
<div class="vus-color--dark"></div>
<div class="vus-color--dark2"></div>
<div class="vus-color--dark3"></div>
灰白色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-color--gray | #888888 | 灰色 |
| vus-color--gray2 | #999999 | 灰色 2 |
| vus-color--gray3 | #aaaaaa | 灰色 3 |
| vus-color--light | #cccccc | 亮灰 |
| vus-color--light2 | #dddddd | 亮灰 2 |
| vus-color--light3 | #eeeeee | 亮灰 3 |
| vus-color--light4 | #f3f3f3 | 亮灰 4 |
| vus-color--light5 | #f5f5f5 | 亮灰 5 |
| vus-color--light6 | #f8f8f8 | 亮灰 6 |
| vus-color--white | #ffffff | 白色 |
灰色
vus-color--gray
灰色 2
vus-color--gray2
灰色 3
vus-color--gray3
亮灰
vus-color--light
亮灰 2
vus-color--light2
亮灰 3
vus-color--light3
亮灰 4
vus-color--light4
亮灰 5
vus-color--light5
亮灰 6
vus-color--light6
白色
vus-color--white
<div class="vus-color--gray"></div>
<div class="vus-color--gray2"></div>
<div class="vus-color--gray3"></div>
<div class="vus-color--light"></div>
<div class="vus-color--light2"></div>
<div class="vus-color--light3"></div>
<div class="vus-color--light4"></div>
<div class="vus-color--light5"></div>
<div class="vus-color--light6"></div>
<div class="vus-color--white"></div>
暖色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-color--red | #ff0000 | 红色 |
| vus-color--red2 | #ff6e6e | 红色 2 |
| vus-color--red3 | #ffc4c4 | 红色 3 |
| vus-color--orange | #ffa500 | 橙色 |
| vus-color--orange2 | #ffd17b | 橙色 2 |
| vus-color--orange3 | #fff0d3 | 橙色 3 |
| vus-color--yellow | #ffff00 | 黄色 |
| vus-color--yellow2 | #ffff80 | 黄色 2 |
| vus-color--yellow3 | #ffffd4 | 黄色 3 |
红色
vus-color--red
红色 2
vus-color--red2
红色 3
vus-color--red3
橙色
vus-color--orange
橙色 2
vus-color--orange2
橙色 3
vus-color--orange3
黄色
vus-color--yellow
黄色 2
vus-color--yellow2
黄色 3
vus-color--yellow3
<div class="vus-color--red"></div>
<div class="vus-color--red2"></div>
<div class="vus-color--red3"></div>
<div class="vus-color--orange"></div>
<div class="vus-color--orange2"></div>
<div class="vus-color--orange3"></div>
<div class="vus-color--yellow"></div>
<div class="vus-color--yellow2"></div>
<div class="vus-color--yellow3"></div>
中性色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-color--purple | #800080 | 紫色 |
| vus-color--purple2 | #b951b9 | 紫色 2 |
| vus-color--purple3 | #ffd6ff | 紫色 3 |
| vus-color--brown | #a52a2a | 棕色 |
| vus-color--brown2 | #ce7b7b | 棕色 2 |
| vus-color--brown3 | #f3cccc | 棕色 3 |
紫色
vus-color--purple
紫色 2
vus-color--purple2
紫色 3
vus-color--purple3
棕色
vus-color--brown
棕色 2
vus-color--brown2
棕色 3
vus-color--brown3
<div class="vus-color--purple"></div>
<div class="vus-color--purple2"></div>
<div class="vus-color--purple3"></div>
<div class="vus-color--brown"></div>
<div class="vus-color--brown2"></div>
<div class="vus-color--brown3"></div>
冷色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-color--green | #008000 | 绿色 |
| vus-color--green2 | #5ec25e | 绿色 2 |
| vus-color--green3 | #d3fad3 | 绿色 3 |
| vus-color--cyan | #00ffff | 青色 |
| vus-color--cyan2 | #77ffff | 青色 2 |
| vus-color--cyan3 | #dfffff | 青色 3 |
| vus-color--blue | #0000ff | 蓝色 |
| vus-color--blue2 | #7b7bff | 蓝色 2 |
| vus-color--blue3 | #dbdbff | 蓝色 3 |
| vus-color--skyblue | #87ceeb | 天蓝色 |
绿色
vus-color--green
绿色 2
vus-color--green2
绿色 3
vus-color--green3
青色
vus-color--cyan
青色 2
vus-color--cyan2
青色 3
vus-color--cyan3
蓝色
vus-color--blue
蓝色 2
vus-color--blue2
蓝色 3
vus-color--blue3
天蓝色
vus-color--skyblue
<div class="vus-color--green"></div>
<div class="vus-color--green2"></div>
<div class="vus-color--green3"></div>
<div class="vus-color--cyan"></div>
<div class="vus-color--cyan2"></div>
<div class="vus-color--cyan3"></div>
<div class="vus-color--blue"></div>
<div class="vus-color--blue2"></div>
<div class="vus-color--blue3"></div>
<div class="vus-color--skyblue"></div>
其它色系
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-color--transparent | transparent | 透明 |
<div class="vus-color--transparent"></div>
背景颜色
使用 vus-bg--* 类，为元素添加指定背景颜色。
状态颜色
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--primary | #409eff | 首选、主要 |
| vus-bg--success | #67c23a | 成功 |
| vus-bg--warning | #e6a23c | 警告 |
| vus-bg--danger | #dd5544 | 危险 |
| vus-bg--error | #ec0000 | 出错 |
| vus-bg--info | #708090 | 信息 |
主要
vus-bg--primary
成功
vus-bg--success
警告
vus-bg--warning
危险
vus-bg--danger
出错
vus-bg--error
信息
vus-bg--info
<div class="vus-bg--primary"></div>
<div class="vus-bg--success"></div>
<div class="vus-bg--warning"></div>
<div class="vus-bg--danger"></div>
<div class="vus-bg--error"></div>
<div class="vus-bg--info"></div>
暗黑色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--black | #000000 | 黑色 |
| vus-bg--black2 | #111111 | 黑色 2 |
| vus-bg--black3 | #222222 | 黑色 3 |
| vus-bg--dark | #333333 | 暗黑 |
| vus-bg--dark2 | #444444 | 暗黑 2 |
| vus-bg--dark3 | #555555 | 暗黑 3 |
黑色
vus-bg--black
黑色 2
vus-bg--black2
黑色 3
vus-bg--black3
暗黑
vus-bg--dark
暗黑 2
vus-bg--dark2
暗黑 3
vus-bg--dark3
<div class="vus-bg--black"></div>
<div class="vus-bg--black2"></div>
<div class="vus-bg--black3"></div>
<div class="vus-bg--dark"></div>
<div class="vus-bg--dark2"></div>
<div class="vus-bg--dark3"></div>
灰白色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--gray | #888888 | 灰色 |
| vus-bg--gray2 | #999999 | 灰色 2 |
| vus-bg--gray3 | #aaaaaa | 灰色 3 |
| vus-bg--light | #cccccc | 亮灰 |
| vus-bg--light2 | #dddddd | 亮灰 2 |
| vus-bg--light3 | #eeeeee | 亮灰 3 |
| vus-bg--light4 | #f3f3f3 | 亮灰 4 |
| vus-bg--light5 | #f5f5f5 | 亮灰 5 |
| vus-bg--light6 | #f8f8f8 | 亮灰 6 |
| vus-bg--white | #ffffff | 白色 |
灰色
vus-bg--gray
灰色 2
vus-bg--gray2
灰色 3
vus-bg--gray3
亮灰
vus-bg--light
亮灰 2
vus-bg--light2
亮灰 3
vus-bg--light3
亮灰 4
vus-bg--light4
亮灰 5
vus-bg--light5
亮灰 6
vus-bg--light6
白色
vus-bg--white
<div class="vus-bg--gray"></div>
<div class="vus-bg--gray2"></div>
<div class="vus-bg--gray3"></div>
<div class="vus-bg--light"></div>
<div class="vus-bg--light2"></div>
<div class="vus-bg--light3"></div>
<div class="vus-bg--light4"></div>
<div class="vus-bg--light5"></div>
<div class="vus-bg--light6"></div>
<div class="vus-bg--white"></div>
暖色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--red | #ff0000 | 红色 |
| vus-bg--red2 | #ff6e6e | 红色 2 |
| vus-bg--red3 | #ffc4c4 | 红色 3 |
| vus-bg--orange | #ffa500 | 橙色 |
| vus-bg--orange2 | #ffd17b | 橙色 2 |
| vus-bg--orange3 | #fff0d3 | 橙色 3 |
| vus-bg--yellow | #ffff00 | 黄色 |
| vus-bg--yellow2 | #ffff80 | 黄色 2 |
| vus-bg--yellow3 | #ffffd4 | 黄色 3 |
红色
vus-bg--red
红色 2
vus-bg--red2
红色 3
vus-bg--red3
橙色
vus-bg--orange
橙色 2
vus-bg--orange2
橙色 3
vus-bg--orange3
黄色
vus-bg--yellow
黄色 2
vus-bg--yellow2
黄色 3
vus-bg--yellow3
<div class="vus-bg--red"></div>
<div class="vus-bg--red2"></div>
<div class="vus-bg--red3"></div>
<div class="vus-bg--orange"></div>
<div class="vus-bg--orange2"></div>
<div class="vus-bg--orange3"></div>
<div class="vus-bg--yellow"></div>
<div class="vus-bg--yellow2"></div>
<div class="vus-bg--yellow3"></div>
中性色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--purple | #800080 | 紫色 |
| vus-bg--purple2 | #b951b9 | 紫色 2 |
| vus-bg--purple3 | #ffd6ff | 紫色 3 |
| vus-bg--brown | #a52a2a | 棕色 |
| vus-bg--brown2 | #ce7b7b | 棕色 2 |
| vus-bg--brown3 | #f3cccc | 棕色 3 |
紫色
vus-bg--purple
紫色 2
vus-bg--purple2
紫色 3
vus-bg--purple3
棕色
vus-bg--brown
棕色 2
vus-bg--brown2
棕色 3
vus-bg--brown3
<div class="vus-bg--purple"></div>
<div class="vus-bg--purple2"></div>
<div class="vus-bg--purple3"></div>
<div class="vus-bg--brown"></div>
<div class="vus-bg--brown2"></div>
<div class="vus-bg--brown3"></div>
冷色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--green | #008000 | 绿色 |
| vus-bg--green2 | #5ec25e | 绿色 2 |
| vus-bg--green3 | #d3fad3 | 绿色 3 |
| vus-bg--cyan | #00ffff | 青色 |
| vus-bg--cyan2 | #77ffff | 青色 2 |
| vus-bg--cyan3 | #dfffff | 青色 3 |
| vus-bg--blue | #0000ff | 蓝色 |
| vus-bg--blue2 | #7b7bff | 蓝色 2 |
| vus-bg--blue3 | #dbdbff | 蓝色 3 |
| vus-bg--skyblue | #87ceeb | 天蓝色 |
绿色
vus-bg--green
绿色 2
vus-bg--green2
绿色 3
vus-bg--green3
青色
vus-bg--cyan
青色 2
vus-bg--cyan2
青色 3
vus-bg--cyan3
蓝色
vus-bg--blue
蓝色 2
vus-bg--blue2
蓝色 3
vus-bg--blue3
天蓝色
vus-bg--skyblue
<div class="vus-bg--green"></div>
<div class="vus-bg--green2"></div>
<div class="vus-bg--green3"></div>
<div class="vus-bg--cyan"></div>
<div class="vus-bg--cyan2"></div>
<div class="vus-bg--cyan3"></div>
<div class="vus-bg--blue"></div>
<div class="vus-bg--blue2"></div>
<div class="vus-bg--blue3"></div>
<div class="vus-bg--skyblue"></div>
背景透明度(黑色)
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--black-01 | rgba(0, 0, 0, 0.1) | 黑色透明 0.1 |
| vus-bg--black-02 | rgba(0, 0, 0, 0.2) | 黑色透明 0.2 |
| vus-bg--black-03 | rgba(0, 0, 0, 0.3) | 黑色透明 0.3 |
| vus-bg--black-04 | rgba(0, 0, 0, 0.4) | 黑色透明 0.4 |
| vus-bg--black-05 | rgba(0, 0, 0, 0.5) | 黑色透明 0.5 |
| vus-bg--black-06 | rgba(0, 0, 0, 0.6) | 黑色透明 0.6 |
| vus-bg--black-07 | rgba(0, 0, 0, 0.7) | 黑色透明 0.7 |
| vus-bg--black-08 | rgba(0, 0, 0, 0.8) | 黑色透明 0.8 |
| vus-bg--black-09 | rgba(0, 0, 0, 0.9) | 黑色透明 0.9 |
vus-bg--black-01
vus-bg--black-02
vus-bg--black-03
vus-bg--black-04
vus-bg--black-05
vus-bg--black-06
vus-bg--black-07
vus-bg--black-08
vus-bg--black-09
<div class="vus-bg--black-01"></div>
<div class="vus-bg--black-02"></div>
<div class="vus-bg--black-03"></div>
<div class="vus-bg--black-04"></div>
<div class="vus-bg--black-05"></div>
<div class="vus-bg--black-06"></div>
<div class="vus-bg--black-07"></div>
<div class="vus-bg--black-08"></div>
<div class="vus-bg--black-09"></div>
背景透明度(白色)
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--white-01 | rgba(255, 255, 255, 0.1) | 白色透明 0.1 |
| vus-bg--white-02 | rgba(255, 255, 255, 0.2) | 白色透明 0.2 |
| vus-bg--white-03 | rgba(255, 255, 255, 0.3) | 白色透明 0.3 |
| vus-bg--white-04 | rgba(255, 255, 255, 0.4) | 白色透明 0.4 |
| vus-bg--white-05 | rgba(255, 255, 255, 0.5) | 白色透明 0.5 |
| vus-bg--white-06 | rgba(255, 255, 255, 0.6) | 白色透明 0.6 |
| vus-bg--white-07 | rgba(255, 255, 255, 0.7) | 白色透明 0.7 |
| vus-bg--white-08 | rgba(255, 255, 255, 0.8) | 白色透明 0.8 |
| vus-bg--white-09 | rgba(255, 255, 255, 0.9) | 白色透明 0.9 |
vus-bg--white-01
vus-bg--white-02
vus-bg--white-03
vus-bg--white-04
vus-bg--white-05
vus-bg--white-06
vus-bg--white-07
vus-bg--white-08
vus-bg--white-09
<div class="vus-bg--white-01"></div>
<div class="vus-bg--white-02"></div>
<div class="vus-bg--white-03"></div>
<div class="vus-bg--white-04"></div>
<div class="vus-bg--white-05"></div>
<div class="vus-bg--white-06"></div>
<div class="vus-bg--white-07"></div>
<div class="vus-bg--white-08"></div>
<div class="vus-bg--white-09"></div>
其它色系
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-bg--transparent | transparent | 透明 |
<div class="vus-bg--transparent"></div>
边框颜色
使用 vus-border--* 类，为元素添加指定边框颜色。
边框的使用方法请查看【Border 边框】说明文档。
状态颜色
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-border--primary | #409eff | 首选、主要 |
| vus-border--success | #67c23a | 成功 |
| vus-border--warning | #e6a23c | 警告 |
| vus-border--danger | #dd5544 | 危险 |
| vus-border--error | #ec0000 | 出错 |
| vus-border--info | #708090 | 信息 |
主要
vus-border--primary
成功
vus-border--success
警告
vus-border--warning
危险
vus-border--danger
出错
vus-border--error
信息
vus-border--info
<div class="vus-border-1 vus-border--primary"></div>
<div class="vus-border-1 vus-border--success"></div>
<div class="vus-border-1 vus-border--warning"></div>
<div class="vus-border-1 vus-border--danger"></div>
<div class="vus-border-1 vus-border--error"></div>
<div class="vus-border-1 vus-border--info"></div>
暗黑色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-border--black | #000000 | 黑色 |
| vus-border--black2 | #111111 | 黑色 2 |
| vus-border--black3 | #222222 | 黑色 3 |
| vus-border--dark | #333333 | 暗黑 |
| vus-border--dark2 | #444444 | 暗黑 2 |
| vus-border--dark3 | #555555 | 暗黑 3 |
黑色
vus-border--black
黑色 2
vus-border--black2
黑色 3
vus-border--black3
暗黑
vus-border--dark
暗黑 2
vus-border--dark2
暗黑 3
vus-border--dark3
<div class="vus-border-1 vus-border--black"></div>
<div class="vus-border-1 vus-border--black2"></div>
<div class="vus-border-1 vus-border--black3"></div>
<div class="vus-border-1 vus-border--dark"></div>
<div class="vus-border-1 vus-border--dark2"></div>
<div class="vus-border-1 vus-border--dark3"></div>
灰白色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-border--gray | #888888 | 灰色 |
| vus-border--gray2 | #999999 | 灰色 2 |
| vus-border--gray3 | #aaaaaa | 灰色 3 |
| vus-border--light | #cccccc | 亮灰 |
| vus-border--light2 | #dddddd | 亮灰 2 |
| vus-border--light3 | #eeeeee | 亮灰 3 |
| vus-border--light4 | #f3f3f3 | 亮灰 4 |
| vus-border--light5 | #f5f5f5 | 亮灰 5 |
| vus-border--light6 | #f8f8f8 | 亮灰 6 |
| vus-border--white | #ffffff | 白色 |
灰色
vus-border--gray
灰色 2
vus-border--gray2
灰色 3
vus-border--gray3
亮灰
vus-border--light
亮灰 2
vus-border--light2
亮灰 3
vus-border--light3
亮灰 4
vus-border--light4
亮灰 5
vus-border--light5
亮灰 6
vus-border--light6
白色
vus-border--white
<div class="vus-border-1 vus-border--gray"></div>
<div class="vus-border-1 vus-border--gray2"></div>
<div class="vus-border-1 vus-border--gray3"></div>
<div class="vus-border-1 vus-border--light"></div>
<div class="vus-border-1 vus-border--light2"></div>
<div class="vus-border-1 vus-border--light3"></div>
<div class="vus-border-1 vus-border--light4"></div>
<div class="vus-border-1 vus-border--light5"></div>
<div class="vus-border-1 vus-border--light6"></div>
<div class="vus-border-1 vus-border--white"></div>
暖色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-border--red | #ff0000 | 红色 |
| vus-border--red2 | #ff6e6e | 红色 2 |
| vus-border--red3 | #ffc4c4 | 红色 3 |
| vus-border--orange | #ffa500 | 橙色 |
| vus-border--orange2 | #ffd17b | 橙色 2 |
| vus-border--orange3 | #fff0d3 | 橙色 3 |
| vus-border--yellow | #ffff00 | 黄色 |
| vus-border--yellow2 | #ffff80 | 黄色 2 |
| vus-border--yellow3 | #ffffd4 | 黄色 3 |
红色
vus-border--red
红色 2
vus-border--red2
红色 3
vus-border--red3
橙色
vus-border--orange
橙色 2
vus-border--orange2
橙色 3
vus-border--orange3
黄色
vus-border--yellow
黄色 2
vus-border--yellow2
黄色 3
vus-border--yellow3
<div class="vus-border-1 vus-border--red"></div>
<div class="vus-border-1 vus-border--red2"></div>
<div class="vus-border-1 vus-border--red3"></div>
<div class="vus-border-1 vus-border--orange"></div>
<div class="vus-border-1 vus-border--orange2"></div>
<div class="vus-border-1 vus-border--orange3"></div>
<div class="vus-border-1 vus-border--yellow"></div>
<div class="vus-border-1 vus-border--yellow2"></div>
<div class="vus-border-1 vus-border--yellow3"></div>
中性色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-border--purple | #800080 | 紫色 |
| vus-border--purple2 | #b951b9 | 紫色 2 |
| vus-border--purple3 | #ffd6ff | 紫色 3 |
| vus-border--brown | #a52a2a | 棕色 |
| vus-border--brown2 | #ce7b7b | 棕色 2 |
| vus-border--brown3 | #f3cccc | 棕色 3 |
紫色
vus-border--purple
紫色 2
vus-border--purple2
紫色 3
vus-border--purple3
棕色
vus-border--brown
棕色 2
vus-border--brown2
棕色 3
vus-border--brown3
<div class="vus-border-1 vus-border--purple"></div>
<div class="vus-border-1 vus-border--purple2"></div>
<div class="vus-border-1 vus-border--purple3"></div>
<div class="vus-border-1 vus-border--brown"></div>
<div class="vus-border-1 vus-border--brown2"></div>
<div class="vus-border-1 vus-border--brown3"></div>
冷色系列
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-border--green | #008000 | 绿色 |
| vus-border--green2 | #5ec25e | 绿色 2 |
| vus-border--green3 | #d3fad3 | 绿色 3 |
| vus-border--cyan | #00ffff | 青色 |
| vus-border--cyan2 | #77ffff | 青色 2 |
| vus-border--cyan3 | #dfffff | 青色 3 |
| vus-border--blue | #0000ff | 蓝色 |
| vus-border--blue2 | #7b7bff | 蓝色 2 |
| vus-border--blue3 | #dbdbff | 蓝色 3 |
| vus-border--skyblue | #87ceeb | 天蓝色 |
绿色
vus-border--green
绿色 2
vus-border--green2
绿色 3
vus-border--green3
青色
vus-border--cyan
青色 2
vus-border--cyan2
青色 3
vus-border--cyan3
蓝色
vus-border--blue
蓝色 2
vus-border--blue2
蓝色 3
vus-border--blue3
天蓝色
vus-border--skyblue
<div class="vus-border-1 vus-border--green"></div>
<div class="vus-border-1 vus-border--green2"></div>
<div class="vus-border-1 vus-border--green3"></div>
<div class="vus-border-1 vus-border--cyan"></div>
<div class="vus-border-1 vus-border--cyan2"></div>
<div class="vus-border-1 vus-border--cyan3"></div>
<div class="vus-border-1 vus-border--blue"></div>
<div class="vus-border-1 vus-border--blue2"></div>
<div class="vus-border-1 vus-border--blue3"></div>
<div class="vus-border-1 vus-border--skyblue"></div>
其它色系
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-border--transparent | transparent | 透明 |
<div class="vus-border-1 vus-border--transparent"></div>
混合模式
mix-blend-mode 用于多个不同标签间的混合模式。
| 样式名称 | 颜色值 | 描述 |
|---|---|---|
| vus-mode-normal | normal | 正常 |
| vus-mode-multiply | multiply | 正片叠底 |
| vus-mode-screen | screen | 滤色 |
| vus-mode-overlay | overlay | 叠加 |
| vus-mode-darken | darken | 变暗 |
| vus-mode-lighten | lighten | 变亮 |
| vus-mode-color-dodge | color-dodge | 颜色减淡 |
| vus-mode-color-burn | color-burn | 颜色加深 |
| vus-mode-hard-light | hard-light | 强光 |
| vus-mode-soft-light | soft-light | 柔光 |
| vus-mode-difference | difference | 差值 |
| vus-mode-exclusion | exclusion | 排除 |
| vus-mode-hue | hue | 色相 |
| vus-mode-saturation | saturation | 饱和度 |
| vus-mode-color | color | 颜色 |
| vus-mode-luminosity | luminosity | 亮度 |
| vus-mode-initial | initial | 默认 |
| vus-mode-inherit | inherit | 继承 |
| vus-mode-unset | unset | 还原 |
<div class="vus-mode-multiply"></div>