1# 边框设置 2 3设置组件边框样式。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9 10## border 11 12border(value: BorderOptions) 13 14设置边框样式。 15 16**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 17 18**系统能力：** SystemCapability.ArkUI.ArkUI.Full 19 20**参数：** 21 22| 参数名 | 类型 | 必填 | 说明 | 23| ------ | --------------------------------------- | ---- | ------------------------------------------------------------ | 24| value | [BorderOptions](#borderoptions对象说明) | 是 | 统一边框样式设置接口。<br/>**说明：** <br/>边框宽度默认值为0，即不显示边框。<br/>从API Version 9开始，父节点的border显示在子节点内容之上。 | 25 26## borderStyle 27 28borderStyle(value: BorderStyle | EdgeStyles) 29 30设置元素的边框线条样式。 31 32**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36**参数：** 37 38| 参数名 | 类型 | 必填 | 说明 | 39| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- | 40| value | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9对象说明)<sup>9+</sup> | 是 | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid | 41 42## borderWidth 43 44borderWidth(value: Length | EdgeWidths) 45 46设置边框的宽度。 47 48**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52**参数：** 53 54| 参数名 | 类型 | 必填 | 说明 | 55| ------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 56| value | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9对象说明)<sup>9+</sup> | 是 | 设置元素的边框宽度，不支持百分比。 | 57 58## borderColor 59 60borderColor(value: ResourceColor | EdgeColors) 61 62设置边框的颜色。 63 64**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 65 66**系统能力：** SystemCapability.ArkUI.ArkUI.Full 67 68**参数：** 69 70| 参数名 | 类型 | 必填 | 说明 | 71| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------- | 72| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9对象说明)<sup>9+</sup> | 是 | 设置元素的边框颜色。<br/>默认值：Color.Black | 73 74## borderRadius 75 76borderRadius(value: Length | BorderRadiuses) 77 78设置边框的圆角。圆角大小受组件尺寸限制，最大值为组件宽或高的一半。 79 80**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 81 82**系统能力：** SystemCapability.ArkUI.ArkUI.Full 83 84**参数：** 85 86| 参数名 | 类型 | 必填 | 说明 | 87| ------ | ------------------------------------------------------------ | ---- | -------------------------------------- | 88| value | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9对象说明)<sup>9+</sup> | 是 | 设置元素的边框圆角半径，不支持百分比。 | 89 90## BorderOptions对象说明 91 92| 名称 | 参数类型 | 必填 | 描述 | 93| ------ | ------------------------------------------------------------ | ---- | ------------------ | 94| width | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9对象说明)<sup>9+</sup> | 否 | 设置边框宽度。 | 95| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9对象说明)<sup>9+</sup> | 否 | 设置边框颜色。 | 96| radius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9对象说明)<sup>9+</sup> | 否 | 设置边框圆角半径。 | 97| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9对象说明)<sup>9+</sup> | 否 | 设置边框样式。 | 98 99## EdgeWidths<sup>9+</sup>对象说明 100 101引入该对象时，至少传入一个参数。 102 103| 名称 | 参数类型 | 必填 | 描述 | 104| ------ | ---------------------------- | ---- | ------- | 105| left | [Length](ts-types.md#length) | 否 | 左侧边框宽度。 | 106| right | [Length](ts-types.md#length) | 否 | 右侧边框宽度。 | 107| top | [Length](ts-types.md#length) | 否 | 上侧边框宽度。 | 108| bottom | [Length](ts-types.md#length) | 否 | 下侧边框宽度。 | 109 110## EdgeColors<sup>9+</sup>对象说明 111 112引入该对象时，至少传入一个参数。 113 114| 名称 | 参数类型 | 必填 | 描述 | 115| ------ | ---------------------------------------- | ---- | ------- | 116| left | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧边框颜色。 | 117| right | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧边框颜色。 | 118| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧边框颜色。 | 119| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧边框颜色。 | 120 121## BorderRadiuses<sup>9+</sup>对象说明 122 123引用该对象时，至少传入一个参数。 124 125| 名称 | 参数类型 | 必填 | 描述 | 126| ----------- | ---------------------------- | ---- | -------- | 127| topLeft | [Length](ts-types.md#length) | 否 | 左上角圆角半径。 | 128| topRight | [Length](ts-types.md#length) | 否 | 右上角圆角半径。 | 129| bottomLeft | [Length](ts-types.md#length) | 否 | 左下角圆角半径。 | 130| bottomRight | [Length](ts-types.md#length) | 否 | 右下角圆角半径。 | 131 132## EdgeStyles<sup>9+</sup>对象说明 133 134引入该对象时，至少传入一个参数。 135 136| 名称 | 参数类型 | 必填 | 描述 | 137| ------ | ---------------------------------------- | ---- | ------- | 138| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 左侧边框样式。 | 139| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 右侧边框样式。 | 140| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 上侧边框样式。 | 141| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 下侧边框样式。 | 142 143## 示例 144 145```ts 146// xxx.ets 147@Entry 148@Component 149struct BorderExample { 150 build() { 151 Column() { 152 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 153 // 线段 154 Text('dashed') 155 .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) 156 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 157 // 点线 158 Text('dotted') 159 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 160 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 161 }.width('100%').height(150) 162 163 Text('.border') 164 .fontSize(50) 165 .width(300) 166 .height(300) 167 .border({ 168 width: { left: 3, right: 6, top: 10, bottom: 15 }, 169 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 170 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 171 style: { 172 left: BorderStyle.Dotted, 173 right: BorderStyle.Dotted, 174 top: BorderStyle.Solid, 175 bottom: BorderStyle.Dashed 176 } 177 }).textAlign(TextAlign.Center) 178 } 179 } 180} 181``` 182 183
