1# 边框设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @zju_ljz--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9设置组件边框样式。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15 16## border 17 18border(value: BorderOptions): T 19 20设置边框样式。 21 22**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 23 24**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 25 26**系统能力：** SystemCapability.ArkUI.ArkUI.Full 27 28**参数：** 29 30| 参数名 | 类型 | 必填 | 说明 | 31| ------ | --------------------------------------- | ---- | ------------------------------------------------------------ | 32| value | [BorderOptions](./ts-types.md#borderoptions) | 是 | 统一边框样式设置接口。<br/>**说明：** <br/>边框宽度默认值为0，即不显示边框。<br/>从API version 9开始，父节点的border显示在子节点内容之上。 | 33 34**返回值：** 35 36| 类型 | 说明 | 37| --- | --- | 38| T | 返回当前组件。 | 39 40 41> **说明：** 42> 43> color、radius缺省时，为了保证[borderColor](#bordercolor)、[borderRadius](#borderradius)生效，需要将[borderColor](#bordercolor)、[borderRadius](#borderradius)设置在[border](#border)后。 44 45## borderStyle 46 47borderStyle(value: BorderStyle | EdgeStyles): T 48 49设置元素的边框线条样式。 50 51**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 52 53**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57**参数：** 58 59| 参数名 | 类型 | 必填 | 说明 | 60| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- | 61| value | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](./ts-types.md#edgestyles9)<sup>9+</sup> | 是 | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid | 62 63**返回值：** 64 65| 类型 | 说明 | 66| --- | --- | 67| T | 返回当前组件。 | 68 69## borderWidth 70 71borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths): T 72 73设置边框的宽度。 74 75**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| ------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 85| value | [Length](ts-types.md#length) \| [EdgeWidths](./ts-types.md#edgewidths9)<sup>9+</sup> \| [LocalizedEdgeWidths](./ts-types.md#localizededgewidths12)<sup>12+</sup> | 是 | 设置元素的边框宽度，不支持百分比。 | 86 87**返回值：** 88 89| 类型 | 说明 | 90| --- | --- | 91| T | 返回当前组件。 | 92 93## borderColor 94 95borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors): T 96 97设置边框的颜色。 98 99**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 100 101**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 102 103**系统能力：** SystemCapability.ArkUI.ArkUI.Full 104 105**参数：** 106 107| 参数名 | 类型 | 必填 | 说明 | 108| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------- | 109| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](./ts-types.md#edgecolors9)<sup>9+</sup> \| [LocalizedEdgeColors](./ts-types.md#localizededgecolors12)<sup>12+</sup> | 是 | 设置元素的边框颜色。<br/>默认值：Color.Black | 110 111**返回值：** 112 113| 类型 | 说明 | 114| --- | --- | 115| T | 返回当前组件。 | 116 117## borderRadius 118 119borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses): T 120 121设置边框的圆角。圆角大小受组件尺寸限制，最大值为组件宽或高的一半。 122 123**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 124 125**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132| ------ | ------------------------------------------------------------ | ---- | -------------------------------------- | 133| value | [Length](ts-types.md#length) \| [BorderRadiuses](./ts-types.md#borderradiuses9)<sup>9+</sup> \| [LocalizedBorderRadiuses](./ts-types.md#localizedborderradiuses12)<sup>12+</sup> | 是 | 设置元素的边框圆角半径，支持百分比，百分比依据组件宽度。设置圆角后，可搭配[.clip属性](./ts-universal-attributes-sharp-clipping.md#clip12)进行裁剪，避免子组件超出组件自身。| 134 135**返回值：** 136 137| 类型 | 说明 | 138| --- | --- | 139| T | 返回当前组件。 | 140 141 142## 示例 143 144### 示例1（基本样式用法） 145 146设置边框的宽度、颜色、圆角半径以及点、线样式。 147 148```ts 149// xxx.ets 150@Entry 151@Component 152struct BorderExample { 153 build() { 154 Column() { 155 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 156 // 线段 157 Text('dashed') 158 .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) 159 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 160 // 点线 161 Text('dotted') 162 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 163 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 164 }.width('100%').height(150) 165 166 Text('.border') 167 .fontSize(50) 168 .width(300) 169 .height(300) 170 .border({ 171 width: { left: 3, right: 6, top: 10, bottom: 15 }, 172 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 173 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 174 style: { 175 left: BorderStyle.Dotted, 176 right: BorderStyle.Dotted, 177 top: BorderStyle.Solid, 178 bottom: BorderStyle.Dashed 179 } 180 }).textAlign(TextAlign.Center) 181 } 182 } 183} 184``` 185 186 187 188### 示例2（边框宽度类型和边框颜色） 189 190border属性的width、radius、color属性值使用LocalizedEdgeWidths类型和LocalizedEdgeColors类型。 191 192```ts 193// xxx.ets 194import { LengthMetrics } from '@kit.ArkUI'; 195@Entry 196@Component 197struct BorderExample { 198 build() { 199 Column() { 200 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 201 // 线段 202 Text('dashed') 203 .borderStyle(BorderStyle.Dashed) 204 .borderWidth(5) 205 .borderColor(0xAFEEEE) 206 .borderRadius(10) 207 .width(120) 208 .height(120) 209 .textAlign(TextAlign.Center) 210 .fontSize(16) 211 // 点线 212 Text('dotted') 213 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 214 .width(120) 215 .height(120) 216 .textAlign(TextAlign.Center) 217 .fontSize(16) 218 }.width('100%').height(150) 219 220 Text('.border') 221 .fontSize(50) 222 .width(300) 223 .height(300) 224 .border({ 225 width: { 226 start: LengthMetrics.vp(3), 227 end: LengthMetrics.vp(6), 228 top: LengthMetrics.vp(10), 229 bottom: LengthMetrics.vp(15) 230 }, 231 color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green }, 232 radius: { 233 topStart: LengthMetrics.vp(10), 234 topEnd: LengthMetrics.vp(20), 235 bottomStart: LengthMetrics.vp(40), 236 bottomEnd: LengthMetrics.vp(80) 237 }, 238 style: { 239 left: BorderStyle.Dotted, 240 right: BorderStyle.Dotted, 241 top: BorderStyle.Solid, 242 bottom: BorderStyle.Dashed 243 } 244 }) 245 .textAlign(TextAlign.Center) 246 } 247 } 248} 249``` 250 251从左至右显示语言示例图 252 253 254 255从右至左显示语言示例图 256 257
