Border

CSS 的 border 是设置元素边框属性的简写形式。

边框样式

Class	属性	描述
border-solid	border-style: solid;	显示为一条实线
border-dashed	border-style: dashed;	显示为一系列短的方形虚线
border-dotted	border-style: dotted;	显示为一系列圆点
border-none	border-style: none;	不显示边框

边框宽度

Class	属性	描述
border	border-width: 1px;	宽度为1px
border-0	border-width: 0px;	宽度为0px
border-1	border-width: 1px;	宽度为1px
border-2	border-width: 2px;	宽度为2px
border-3	border-width: 3px;	宽度为3px
border-4	border-width: 4px;	宽度为4px
border-5	border-width: 5px;	宽度为5px
border-6	border-width: 6px;	宽度为6px
border-7	border-width: 7px;	宽度为7px
border-8	border-width: 8px;	宽度为8px
border-9	border-width: 9px;	宽度为9px
border-10	border-width: 10px;	宽度为10px

边框色彩

主色

主题

primary

#604CFC

辅助色

成功

success

#07C160

警告

warning

#EDA20C

危险

danger

#D9514C

中性色

grey-1

#ffffff

grey-2

#f7f8fa

grey-3

#f2f3f5

grey-4

#e5e6eb

grey-5

#c9cdd4

grey-6

#a9aeb8

grey-7

#86909c

grey-8

#6b7785

grey-9

#4e5969

grey-10

#272e3b

grey-11

#1d2129

grey-12

#141414

内置色彩

Red / 浪漫红

red

#F53F3F

Orange Red / 晚秋红

orangered

#F77234

Orange / 活力橙

orange

#FF7D00

Gold / 黄昏

gold

#F7BA1E

Yellow / 柠檬黄

yellow

#FADC19

Lime / 新生绿

lime

#9FDB1D

Green / 仙野绿

green

#00B42A

Cyan / 碧涛青

cyan

#14C9C9

Blue / 海蔚蓝

blue

#3491FA

Arco Blue / 极致蓝

arcoblue

#165DFF

Purple / 暗夜紫

purple

#722ED1

Pink Purple / 青春紫

pinkpurple

#D91AD9

Magenta / 品红

magenta

#F5319D

* 函数方法

getOsBorder(options)

获取右边框属性

options 参数

参数名称	类型	必填	可选值	描述
direction	string	是	direction 边框方向	边框方向
width	string	是	-	边框宽度
style	string	是	solid、dashed、dotted	边框样式
color	string	是	色彩	UCS 色彩变量 或 Hex 颜色值

direction 边框方向

参数值	描述
all	全边框（四边）
top	上边框
bottom	下边框
left	左边框
right	右边框

边框样式

参数值	描述
none	不显示边框
solid	显示为一条实线
dashed	显示为一系列短的方形虚线
dotted	显示为一系列圆点

示例

UCS 色彩变量

<template>
	<view class="box" :style="[getOsBorder('all','2px','dotted','primary')]">

	</view>
</template>

<script setup>
	import { getOsBorder } from "@/uni_modules/ucs-css"; 
</script>

<style>
	.box {
		width: 123px;
		height: 123px;
	}
</style>

Hex 颜色值

<template>
	<view class="box" :style="[getOsBorder('all','2px','dotted','#604CFC')]">

	</view>
</template>

<script setup>
	import { getOsBorder } from "@/uni_modules/ucs-css"; 
</script>

<style>
	.box {
		width: 123px;
		height: 123px;
	}
</style>