HarmonyOS NextSettings中的边界使用与个体方向
# HarmonyOS NextSettings 中的边框使用和单独方向设置
<p>以下详细说明了在相关开发环境中组件边框样式的实现：</p>
### 边框样式设置概述
<p>自 API 版本 7 起，边框样式已被支持，后续版本增加了对不同应用场景（如 ArkTS 卡片和元服务）的支持。</p>
### border 接口
- <p><pre><code> 功能
:
```
border(value: BorderOptions)
```
设置统一的边框样式。
- 默认边框宽度为 0（不可见）
- 自 API 版本 9 起，父节点边框显示在子节点内容之上
</code></pre>
- <p><pre><code> 支持
:
- ArkTS 卡片：自 API 版本 9 起支持
- 元服务：自 API 版本 11 起支持
</code></pre>
- *系统能力*: `SystemCapability.ArkUI.ArkUI.Full`
### borderStyle 接口
- <p><pre><code> 功能
:
```
borderStyle(value: BorderStyle | EdgeStyles)
```
设置边框线样式。
- 默认值：`BorderStyle.Solid`
</code></pre>
- <p><pre><code> 支持
:
- ArkTS 卡片：自 API 版本 9 起支持
- 元服务：自 API 版本 11 起支持
</code></pre>
- *系统能力*: `SystemCapability.ArkUI.ArkUI.Full`
### borderWidth 接口
- <p><pre><code> 功能
:
```
borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths)
```
设置边框宽度。
- 不支持百分比值
</code></pre>
- <p><pre><code> 支持
:
- ArkTS 卡片：自 API 版本 9 起支持
- 元服务：自 API 版本 11 起支持
</code></pre>
- *系统能力*: `SystemCapability.ArkUI.ArkUI.Full`
### borderColor 接口
- <p><pre><code> 功能
:
```
borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors)
```
设置边框颜色。
- 默认值：`Color.Black`
</code></pre>
- <p><pre><code> 支持
:
- ArkTS 卡片：自 API 版本 9 起支持
- 元服务：自 API 版本 11 起支持
</code></pre>
- *系统能力*: `SystemCapability.ArkUI.ArkUI.Full`
### borderRadius 接口
- <p><pre><code> 功能
:
```
borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses)
```
设置边框圆角。
- 最大圆角限制为组件宽度/高度的一半
- 支持百分比值（相对于组件宽度）
- 与 `.clip` 一起使用以防止子组件溢出
</code></pre>
- <p><pre><code> 支持
:
- ArkTS 卡片：自 API 版本 9 起支持
- 元服务：自 API 版本 11 起支持
</code></pre>
- *系统能力*: `SystemCapability.ArkUI.ArkUI.Full`
<p>这些接口提供了对不同应用场景下组件边框样式的全面和灵活的控制。</p>
### 单独边框方向设置示例
```
Row().border({
width: { bottom: 1 }, // 仅设置底部边框宽度
color: { bottom: 'rgba(153, 159, 181, 0.15)' }, // 仅设置底部边框颜色
})
```
查看原文
# Border Usage and Individual Direction in HarmonyOS NextSettings<p>The following details the implementation of component border styling in relevant development environments:<p>### Border Style Setting Overview<p>Border styling has been supported since API Version 7, with subsequent versions adding support for different application scenarios (such as ArkTS cards and meta-services).<p>### border Interface<p>-<p><pre><code> Function
:
```
border(value: BorderOptions)
```
sets unified border styles.
- Default border width is 0 (invisible)
- Since API Version 9, parent node borders display above child node content
</code></pre>
-<p><pre><code> Support
:
- ArkTS Cards: Supported since API version 9
- Meta Services: Supported since API version 11
</code></pre>
- *System Capability*: `SystemCapability.ArkUI.ArkUI.Full`<p>### borderStyle Interface<p>-<p><pre><code> Function
:
```
borderStyle(value: BorderStyle | EdgeStyles)
```
sets border line styles.
- Default value: `BorderStyle.Solid`
</code></pre>
-<p><pre><code> Support
:
- ArkTS Cards: Supported since API version 9
- Meta Services: Supported since API version 11
</code></pre>
- *System Capability*: `SystemCapability.ArkUI.ArkUI.Full`<p>### borderWidth Interface<p>-<p><pre><code> Function
:
```
borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths)
```
sets border widths.
- Percentage values not supported
</code></pre>
-<p><pre><code> Support
:
- ArkTS Cards: Supported since API version 9
- Meta Services: Supported since API version 11
</code></pre>
- *System Capability*: `SystemCapability.ArkUI.ArkUI.Full`<p>### borderColor Interface<p>-<p><pre><code> Function
:
```
borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors)
```
sets border colors.
- Default value: `Color.Black`
</code></pre>
-<p><pre><code> Support
:
- ArkTS Cards: Supported since API version 9
- Meta Services: Supported since API version 11
</code></pre>
- *System Capability*: `SystemCapability.ArkUI.ArkUI.Full`<p>### borderRadius Interface<p>-<p><pre><code> Function
:
```
borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses)
```
sets border radii.
- Maximum radius limited to half of component width/height
- Supports percentage values (relative to component width)
- Use with `.clip` to prevent child components from overflowing
</code></pre>
-<p><pre><code> Support
:
- ArkTS Cards: Supported since API version 9
- Meta Services: Supported since API version 11
</code></pre>
- *System Capability*: `SystemCapability.ArkUI.ArkUI.Full`<p>These interfaces provide comprehensive and flexible control over component border styling across different application scenarios.<p>### Individual Border Direction Setting Example<p>```
Row().border({
width: { bottom: 1 }, // Set only bottom border width
color: { bottom: 'rgba(153, 159, 181, 0.15)' }, // Set only bottom border color
})
```