Border

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

函数方法

温馨提示

使用 UCS 色彩变量，切换暗黑模式时则自动变更为深色颜色值。

border(options)

获取全边框属性

borderTop(options)

获取上边框属性

borderBottom(options)

获取下边框属性

borderLeft(options)

获取左边框属性

borderRight(options)

获取右边框属性

options 参数

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

边框样式

参数值	描述
none	和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
solid	显示为一条实线
dashed	显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定
dotted	显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半

示例

UCS 色彩变量

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

	</view>
</template>

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

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

Hex 颜色值

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

	</view>
</template>

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

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