1# 边框设置 2 3设置组件边框样式。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 从API Version 9开始，父节点的border显示在子节点内容之上。 10 11 12## 属性 13 14| 名称 | 参数类型 | 描述 | 15| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 16| border | {<br/>width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9对象说明)<sup>9+</sup>,<br/>color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9对象说明)<sup>9+</sup>,<br/>radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9对象说明)<sup>9+</sup>,<br/>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9对象说明)<sup>9+</sup><br/>} | 统一边框样式设置接口。<br/>- width：设置边框宽度。<br/>- color：设置边框颜色。<br/>- radius：设置边框圆角半径。<br/>- style：设置边框样式。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 17| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9对象说明)<sup>9+</sup> | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 18| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9对象说明)<sup>9+</sup> | 设置元素的边框宽度，不支持百分比。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 19| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9对象说明)<sup>9+</sup> | 设置元素的边框颜色。<br/>默认值：Color.Black<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 20| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9对象说明)<sup>9+</sup> | 设置元素的边框圆角半径，不支持百分比。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 21 22## EdgeWidths<sup>9+</sup>对象说明 23 24引入该对象时，至少传入一个参数。 25 26| 名称 | 参数类型 | 必填 | 描述 | 27| ------ | ---------------------------- | ---- | ------- | 28| left | [Length](ts-types.md#length) | 否 | 左侧边框宽度。 | 29| right | [Length](ts-types.md#length) | 否 | 右侧边框宽度。 | 30| top | [Length](ts-types.md#length) | 否 | 上侧边框宽度。 | 31| bottom | [Length](ts-types.md#length) | 否 | 下侧边框宽度。 | 32 33## EdgeColors<sup>9+</sup>对象说明 34 35引入该对象时，至少传入一个参数。 36 37| 名称 | 参数类型 | 必填 | 描述 | 38| ------ | ---------------------------------------- | ---- | ------- | 39| left | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧边框颜色。 | 40| right | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧边框颜色。 | 41| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧边框颜色。 | 42| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧边框颜色。 | 43 44## BorderRadiuses<sup>9+</sup>对象说明 45 46引用该对象时，至少传入一个参数。 47 48| 名称 | 参数类型 | 必填 | 描述 | 49| ----------- | ---------------------------- | ---- | -------- | 50| topLeft | [Length](ts-types.md#length) | 否 | 左上角圆角半径。 | 51| topRight | [Length](ts-types.md#length) | 否 | 右上角圆角半径。 | 52| bottomLeft | [Length](ts-types.md#length) | 否 | 左下角圆角半径。 | 53| bottomRight | [Length](ts-types.md#length) | 否 | 右下角圆角半径。 | 54 55## EdgeStyles<sup>9+</sup>对象说明 56 57引入该对象时，至少传入一个参数。 58 59| 名称 | 参数类型 | 必填 | 描述 | 60| ------ | ---------------------------------------- | ---- | ------- | 61| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 左侧边框样式。 | 62| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 右侧边框样式。 | 63| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 上侧边框样式。 | 64| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 下侧边框样式。 | 65 66## 示例 67 68```ts 69// xxx.ets 70@Entry 71@Component 72struct BorderExample { 73 build() { 74 Column() { 75 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 76 // 线段 77 Text('dashed') 78 .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) 79 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 80 // 点线 81 Text('dotted') 82 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 83 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 84 }.width('100%').height(150) 85 86 Text('.border') 87 .fontSize(50) 88 .width(300) 89 .height(300) 90 .border({ 91 width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' }, 92 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 93 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 94 style: { 95 left: BorderStyle.Dotted, 96 right: BorderStyle.Dotted, 97 top: BorderStyle.Solid, 98 bottom: BorderStyle.Dashed 99 } 100 }).textAlign(TextAlign.Center) 101 } 102 } 103} 104``` 105 106
