uni-app x CSS border-radius 圆角属性完全指南语法、多端兼容与拍平flatten实战【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app导读本文以 uni-app x 官方 CSS 文档 docs/css/border-radius.md 为主体结合仓库内的真实示例页面 src/pages/CSS/border/border-radius.uvue 与平台差异说明 docs/css/css_diff_web.md系统讲解border-radius的语法规则、取值限制、Web/App/HarmonyOS 多端兼容性以及蒸汽模式Vapor下flatten拍平节点的用法。读完本文你将掌握在 uni-app x 中实现圆角卡片、正圆头像、椭圆胶囊等效果的标准写法并理解百分比圆角、rpx 单位与拍平渲染的版本与平台边界。一、认识 border-radiusborder-radius是 CSS 中用于设置元素外边框圆角的核心属性。其圆角本质是使用一个半径时确定一个圆形使用两个半径时确定一个椭圆这个椭圆与边框的交集部分即呈现为圆角效果。在 uni-app x 中border-radius适用于view、text、image、scroll-view、native-view等常见组件是构建圆角卡片、圆形头像、胶囊按钮、圆角输入框等 UI 的基础样式属性。二、语法与取值border-radius的完整语法如下border-radius: length-percentage{1,4} [ / length-percentage{1,4} ]?;2.1 值数量与作用范围语法中{1,4}表示可以依次提供 14 个值遵循 CSS 标准的四方取值规则| 值数量 | 作用范围 | | :- | :- | | 1 个值 | 四个角使用相同半径 | | 2 个值 | 第一个值作用于左上/右下第二个值作用于右上/左下 | | 3 个值 | 第一个值作用于左上第二个值作用于右上/左下第三个值作用于右下 | | 4 个值 | 按左上、右上、右下、左下的顺时针顺序分别设置 |2.2 椭圆圆角与斜杠语法语法中[ / length-percentage{1,4} ]?为可选部分斜杠/之前的 14 个值定义水平半径斜杠之后的 14 个值定义垂直半径。当水平与垂直半径不同时圆角即呈现为椭圆弧斜杠部分省略时垂直半径默认等于水平半径形成圆弧。例如border-radius: 10px / 20px会得到一个水平半径 10px、垂直半径 20px 的椭圆圆角可用于制作胶囊或拱形效果。2.3 单边圆角属性除简写属性外uni-app x 还支持四个独立的单角圆角属性语法均为length-percentage{1,2}1 个值生成圆弧2 个值生成椭圆弧border-top-left-radius左上角border-top-right-radius右上角border-bottom-left-radius左下角border-bottom-right-radius右下角各单边属性对应的官方文档见 docs/css/border-top-left-radius.md、docs/css/border-top-right-radius.md、docs/css/border-bottom-left-radius.md、docs/css/border-bottom-right-radius.md。2.4 值限制border-radius的取值类型限制为length如px、rpx等长度单位percentage百分比相对于元素自身边框盒的宽高计算——水平半径相对于宽度垂直半径相对于高度。默认值为0即不设置任何圆角时元素四角为直角。三、兼容性一览border-radius在 uni-app x 各端与蒸汽模式拍平场景下的兼容版本如下。3.1 uni-app x 基础兼容性| Web | Android | iOS | HarmonyOS | | :- | :- | :- | :- | | 4.0 | 3.9 | 4.11 | 4.61 |以上版本号为各平台支持该属性的 HBuilderX / uni-app x 最低版本。3.2 App 平台拍平flatten兼容性| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) | | :- | :- | :- | | 5.21 | 5.11 | 5.0 |即蒸汽模式Vapor下对节点添加flatten属性使用border-radiusAndroid 需 HBuilderX 5.21、iOS 需 5.11、HarmonyOS 需 5.0。这与蒸汽模式本身的平台支持节奏一致——见 docs/app-vapor.mdHBuilderX 5.0 鸿蒙支持蒸汽模式、5.11 iOS 支持、5.21 Android 支持。四、完整实战示例仓库 src/pages/CSS/border/border-radius.uvue 提供了与官方文档同步的完整示例页面文档版示例还额外包含 Web 端条件编译与更多枚举值覆盖了不同单位、不同单角、正圆/扁圆、子视图裁剪、text/image/scroll-view 组件以及动态读写等场景。以下示例以普通版本与拍平版本flatten左右对照的方式演示各用法。template !-- #ifdef APP -- scroll-view styleflex: 1 !-- #endif -- view styleflex-grow: 1 text classuni-tips说明左边是正常版本右边是拍平版本/text view textborder-radius: 10px/text view classdemo-box view classcommon styleborder-radius: 10px;/view view classcommon styleborder-radius: 10px; flatten/view /view /view view textborder-radius: 10% 和阴影/text view classdemo-box styleheight: 60px; view classcommon styleborder-radius: 10%;box-shadow: 5px 5px rgba(0, 0, 0, .3);/view view classcommon styleborder-radius: 10%;box-shadow: 5px 5px rgba(0, 0, 0, .3); flatten/view /view /view view textborder-top-left-radius: 10px/text view classdemo-box view classcommon styleborder-top-left-radius: 10px/view view classcommon styleborder-top-left-radius: 10px flatten/view /view /view view textborder-top-right-radius: 10px/text view classdemo-box view classcommon styleborder-top-right-radius: 10px/view view classcommon styleborder-top-right-radius: 10px flatten/view /view /view view textborder-bottom-left-radius: 10px/text view classdemo-box view classcommon styleborder-bottom-left-radius: 10px/view view classcommon styleborder-bottom-left-radius: 10px flatten/view /view /view view textborder-bottom-right-radius: 10px/text view classdemo-box view classcommon styleborder-bottom-right-radius: 10px/view view classcommon styleborder-bottom-right-radius: 10px flatten/view /view /view view textborder-radius: 150px长宽不同形成扁圆/text view classdemo-box view classcommon styleborder-radius: 150px/view view classcommon styleborder-radius: 150px flatten/view /view /view view textborder-radius: 150px与长宽相同形成正圆/text view classdemo-box view classcommon-square styleborder-radius: 150px/view view classcommon-square styleborder-radius: 150px flatten/view /view /view view textborder-radius: 10px包含子视图/text view classdemo-box view classcommon stylemargin-left: 5px;border-radius: 10px view stylebackground-color: wheat;width: 100%;height: 20px;/view /view view classcommon stylemargin-left: 5px;border-radius: 10px flatten view stylebackground-color: wheat;width: 100%;height: 20px; flatten/view /view /view /view view textborder-bottom-left-radius: 10px \nborder-bottom-right-radius: 10px \n(包含子视图/text view classdemo-box view classcommon stylemargin-left: 5px;border-top-left-radius: 10px;border-top-right-radius: 10px view stylebackground-color: wheat;width: 100%;height: 20px;/view /view view classcommon stylemargin-left: 5px;border-top-left-radius: 10px;border-top-right-radius: 10px flatten view stylebackground-color: wheat;width: 100%;height: 20px; flatten/view /view /view /view view texttext组件: border-radius: 10px/text view classdemo-box text classtext-radius styleborder-radius: 10px;文本/text text classtext-radius styleborder-radius: 10px; flatten文本/text /view /view view texttext组件: border-radius: 25px与高度相同形成圆角/text view classdemo-box text classtext-radius-circle styleborder-radius: 25px;文本/text text classtext-radius-circle styleborder-radius: 25px; flatten文本/text /view /view view textimage组件: border-radius: 10px/text view classdemo-box image classimage-radius styleborder-radius: 10px; src/static/test-image/logo.png/image image classimage-radius styleborder-radius: 10px; src/static/test-image/logo.png flatten/image /view /view view textimage组件: border-radius: 100px与长宽相同形成正圆/text view classdemo-box image classimage-radius-circle styleborder-radius: 100px; src/static/test-image/logo.png/image image classimage-radius-circle styleborder-radius: 100px; src/static/test-image/logo.png flatten/image /view /view text classuni-title-text uni-common-mtscroll-view 组件/text view classdemo-box scroll-view classcommon styleborder-radius: 10px; text classcommon-textborder-radius: 10px/text /scroll-view scroll-view classcommon styleborder-radius: 100px; text classcommon-textborder-radius: 100px/text /scroll-view /view view classuni-common-mb textnative-view组件: border-radius: 10px 和 border-top-left-radius: 10px/text view classdemo-box native-view classcommon styleborder-radius: 10px/native-view native-view classcommon styleborder-top-left-radius: 10px/native-view /view /view /view !-- #ifdef APP -- /scroll-view !-- #endif -- /template4.1 正圆、扁圆与超大值圆角示例中三组对照直观呈现了圆角半径与元素宽高的关系border-radius: 150px作用于 150×50 的元素时水平方向被完整裁剪、垂直方向只裁剪一半形成扁圆胶囊同样的150px作用于 150×150 的正方形时恰好形成正圆border-radius: 999px作用于 150×150 的元素时圆角半径超出边界最终同样收敛为正圆——这是设置一个很大的圆角值得到正圆技巧的依据。官方文档 docs/css/border-radius.md 的完整示例中还包含了border-radius: 999px配合border: 1px solid green; border-top-color: red;的多色边框圆角展示以及border-radius: 10rpx的 rpx 单位用法可对照查看。4.2 组件样式定义示例中使用的样式类如下摘自 src/pages/CSS/border/border-radius.uvue 的style块.common { width: 150px; height: 50px; background-color: gray; } .demo-box { flex-direction: row; margin-top: 10px; justify-content: space-around; } .common-square { width: 150px; height: 150px; background-color: gray; } .text-radius { width: 150px; height: 50px; background-color: gray; font-size: 16px; color: black; } .text-radius-circle { width: 150px; height: 25px; background-color: gray; font-size: 16px; color: black; } .image-radius { width: 150px; height: 100px; background-color: gray; } .image-radius-circle { width: 100px; height: 100px; background-color: gray; }五、动态设置与读取 border-radius除了静态样式uni-app x 还支持通过元素对象的style.setProperty()动态设置、以style.getPropertyValue()读取border-radius。示例页面脚本部分演示了在view、text、image三类组件含拍平版本上的完整读写流程关键逻辑如下const getPropertyValues () { data.borderRadiusActual viewRef.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualFlat viewRefFlat.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualText textRef.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualTextFlat textRefFlat.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualImage imageRef.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualImageFlat imageRefFlat.value?.style.getPropertyValue(border-radius) ?? } const changeBorderRadius (value: string) { data.borderRadius value viewRef.value?.style.setProperty(border-radius, value) viewRefFlat.value?.style.setProperty(border-radius, value) textRef.value?.style.setProperty(border-radius, value) textRefFlat.value?.style.setProperty(border-radius, value) imageRef.value?.style.setProperty(border-radius, value) imageRefFlat.value?.style.setProperty(border-radius, value) // 使用 nextTick 确保样式已应用后再获取值 nextTick(() { getPropertyValues() }) }配套的枚举值文档版示例包含10rpx、100%等更多取值与输入框示例const borderRadiusEnum: ItemType[] [ { value: 0, name: }, { value: 1, name: 0 }, { value: 2, name: 5px }, { value: 3, name: 20px }, { value: 4, name: 10rpx }, { value: 5, name: 0% }, { value: 6, name: 50% }, { value: 7, name: 100% } ]实战要点元素引用通过ref获取类型为UniElement/UniTextElement/UniImageElement对应view/text/image组件写入后需在nextTick()回调中再读取确保样式已应用到原生渲染层页面就绪阶段可在onReady()中调用一次getPropertyValues()以同步初始值枚举中的第一个空字符串专门用于验证空值情况。六、常见实战场景正圆与百分比裁剪6.1 圆形头像 / 圆形图片让图片显示为正圆的核心是圆角半径不小于元素宽高的一半。由于border-radius取值超过边界时会收敛为正圆实践中两种写法等价.avatar { width: 100px; height: 100px; border-radius: 50%; /* 或 border-radius: 50px */ }6.2 百分比支持的版本边界官方文档 docs/css/border-radius.md 的 tips 明确指出App-Android/iOS 平台从 HBuilderX 5.0 开始支持百分比在 HBuilderX 5.0 之前Android/iOS 如需裁剪正圆图片无法使用50%应改用与图片宽高相同的像素值。例如图片长宽为 250px设置border-radius: 125px即可得到正圆如果无法确定元素宽高如width: auto可以设置一个非常大的圆角半径值例如border-radius: 10000px使显示为正圆鸿蒙平台一直支持百分比。平台差异文档 docs/css/css_diff_web.md 中 圆角百分比支持不完全 一节进一步补充标准 CSS 中border-radius与四个方向的单角圆角属性都支持百分比但在 App 平台仅border-radius简写支持百分比四个方向的单角属性如border-top-left-radius暂不支持百分比。6.3 椭圆胶囊需要长条胶囊如标签、按钮、搜索框时可用与短边相同的圆角值元素高 25px、宽 150px 时设置border-radius: 25px即得圆角胶囊若需要更扁的椭圆弧可使用斜杠语法border-radius: 150px / 25px。七、平台差异与注意事项综合官方文档与平台差异说明使用border-radius时需注意以下几点rpx 单位限制App 平台蒸汽模式不支持 rpx 单位。蒸汽模式下应使用px或百分比其余单位换算在 vdom 模式可用但跨端一致性问题建议统一为px。单角属性不支持百分比Appborder-top-left-radius等四个单角属性在 App 平台不支持百分比仅border-radius简写支持见 docs/css/css_diff_web.md。边框默认颜色差异App 平台border-color系列默认值为#000000而不是标准 CSS 的currentcolor如需边框颜色跟随文字颜色应显式设置参见 docs/css/css_diff_web.md。百分比水平/垂直半径基准百分比中的水平半径基于元素宽度计算、垂直半径基于元素高度计算因此同一百分比在宽高不同的元素上会得到椭圆圆角。子视图裁剪圆角父容器包含子视图时子视图超出圆角边界的部分会被裁剪示例中wheat背景子视图即演示了该行为拍平版本同样支持。scroll-view 与 native-viewscroll-view、native-view同样可以设置border-radius示例中分别以 10px、100px 圆角演示。八、蒸汽模式与 flatten 拍平flatten是蒸汽模式Vapor中控制节点渲染方式的标志为组件添加flatten属性后该节点会被拍平减少原生渲染层级从而提升渲染性能。蒸汽模式即 vue3 去掉虚拟 DOM 的版本配合 App 平台原生渲染管线实现更高性能详见 docs/app-vapor.md。border-radius支持拍平且不属于 不支持拍平的 CSS 属性 列表该列表包含background-clip、transition、z-index、visibility等。但拍平能力有版本要求见上文 3.2 小节 的兼容性表Android(Vapor) 5.21、iOS(Vapor) 5.11、HarmonyOS(Vapor) 5.0。需要拍平的场景建议列表项、单元格等高频复用、层级较深的节点可通过flatten减少层级换取性能但若节点依赖不支持拍平的属性则不应盲目添加flatten。九、参见与延伸阅读主文档docs/css/border-radius.md示例源码src/pages/CSS/border/border-radius.uvue单角圆角文档docs/css/border-top-left-radius.md、docs/css/border-top-right-radius.md、docs/css/border-bottom-left-radius.md、docs/css/border-bottom-right-radius.md圆角百分比差异docs/css/css_diff_web.md蒸汽模式与拍平docs/app-vapor.md边框相关属性docs/css/border.md、docs/css/border-width.md、docs/css/border-style.md、docs/css/box-shadow.md样式清单总览docs/css/README.md【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
uni-app x CSS border-radius 圆角属性完全指南：语法、多端兼容与拍平（flatten）实战
uni-app x CSS border-radius 圆角属性完全指南语法、多端兼容与拍平flatten实战【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app导读本文以 uni-app x 官方 CSS 文档 docs/css/border-radius.md 为主体结合仓库内的真实示例页面 src/pages/CSS/border/border-radius.uvue 与平台差异说明 docs/css/css_diff_web.md系统讲解border-radius的语法规则、取值限制、Web/App/HarmonyOS 多端兼容性以及蒸汽模式Vapor下flatten拍平节点的用法。读完本文你将掌握在 uni-app x 中实现圆角卡片、正圆头像、椭圆胶囊等效果的标准写法并理解百分比圆角、rpx 单位与拍平渲染的版本与平台边界。一、认识 border-radiusborder-radius是 CSS 中用于设置元素外边框圆角的核心属性。其圆角本质是使用一个半径时确定一个圆形使用两个半径时确定一个椭圆这个椭圆与边框的交集部分即呈现为圆角效果。在 uni-app x 中border-radius适用于view、text、image、scroll-view、native-view等常见组件是构建圆角卡片、圆形头像、胶囊按钮、圆角输入框等 UI 的基础样式属性。二、语法与取值border-radius的完整语法如下border-radius: length-percentage{1,4} [ / length-percentage{1,4} ]?;2.1 值数量与作用范围语法中{1,4}表示可以依次提供 14 个值遵循 CSS 标准的四方取值规则| 值数量 | 作用范围 | | :- | :- | | 1 个值 | 四个角使用相同半径 | | 2 个值 | 第一个值作用于左上/右下第二个值作用于右上/左下 | | 3 个值 | 第一个值作用于左上第二个值作用于右上/左下第三个值作用于右下 | | 4 个值 | 按左上、右上、右下、左下的顺时针顺序分别设置 |2.2 椭圆圆角与斜杠语法语法中[ / length-percentage{1,4} ]?为可选部分斜杠/之前的 14 个值定义水平半径斜杠之后的 14 个值定义垂直半径。当水平与垂直半径不同时圆角即呈现为椭圆弧斜杠部分省略时垂直半径默认等于水平半径形成圆弧。例如border-radius: 10px / 20px会得到一个水平半径 10px、垂直半径 20px 的椭圆圆角可用于制作胶囊或拱形效果。2.3 单边圆角属性除简写属性外uni-app x 还支持四个独立的单角圆角属性语法均为length-percentage{1,2}1 个值生成圆弧2 个值生成椭圆弧border-top-left-radius左上角border-top-right-radius右上角border-bottom-left-radius左下角border-bottom-right-radius右下角各单边属性对应的官方文档见 docs/css/border-top-left-radius.md、docs/css/border-top-right-radius.md、docs/css/border-bottom-left-radius.md、docs/css/border-bottom-right-radius.md。2.4 值限制border-radius的取值类型限制为length如px、rpx等长度单位percentage百分比相对于元素自身边框盒的宽高计算——水平半径相对于宽度垂直半径相对于高度。默认值为0即不设置任何圆角时元素四角为直角。三、兼容性一览border-radius在 uni-app x 各端与蒸汽模式拍平场景下的兼容版本如下。3.1 uni-app x 基础兼容性| Web | Android | iOS | HarmonyOS | | :- | :- | :- | :- | | 4.0 | 3.9 | 4.11 | 4.61 |以上版本号为各平台支持该属性的 HBuilderX / uni-app x 最低版本。3.2 App 平台拍平flatten兼容性| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) | | :- | :- | :- | | 5.21 | 5.11 | 5.0 |即蒸汽模式Vapor下对节点添加flatten属性使用border-radiusAndroid 需 HBuilderX 5.21、iOS 需 5.11、HarmonyOS 需 5.0。这与蒸汽模式本身的平台支持节奏一致——见 docs/app-vapor.mdHBuilderX 5.0 鸿蒙支持蒸汽模式、5.11 iOS 支持、5.21 Android 支持。四、完整实战示例仓库 src/pages/CSS/border/border-radius.uvue 提供了与官方文档同步的完整示例页面文档版示例还额外包含 Web 端条件编译与更多枚举值覆盖了不同单位、不同单角、正圆/扁圆、子视图裁剪、text/image/scroll-view 组件以及动态读写等场景。以下示例以普通版本与拍平版本flatten左右对照的方式演示各用法。template !-- #ifdef APP -- scroll-view styleflex: 1 !-- #endif -- view styleflex-grow: 1 text classuni-tips说明左边是正常版本右边是拍平版本/text view textborder-radius: 10px/text view classdemo-box view classcommon styleborder-radius: 10px;/view view classcommon styleborder-radius: 10px; flatten/view /view /view view textborder-radius: 10% 和阴影/text view classdemo-box styleheight: 60px; view classcommon styleborder-radius: 10%;box-shadow: 5px 5px rgba(0, 0, 0, .3);/view view classcommon styleborder-radius: 10%;box-shadow: 5px 5px rgba(0, 0, 0, .3); flatten/view /view /view view textborder-top-left-radius: 10px/text view classdemo-box view classcommon styleborder-top-left-radius: 10px/view view classcommon styleborder-top-left-radius: 10px flatten/view /view /view view textborder-top-right-radius: 10px/text view classdemo-box view classcommon styleborder-top-right-radius: 10px/view view classcommon styleborder-top-right-radius: 10px flatten/view /view /view view textborder-bottom-left-radius: 10px/text view classdemo-box view classcommon styleborder-bottom-left-radius: 10px/view view classcommon styleborder-bottom-left-radius: 10px flatten/view /view /view view textborder-bottom-right-radius: 10px/text view classdemo-box view classcommon styleborder-bottom-right-radius: 10px/view view classcommon styleborder-bottom-right-radius: 10px flatten/view /view /view view textborder-radius: 150px长宽不同形成扁圆/text view classdemo-box view classcommon styleborder-radius: 150px/view view classcommon styleborder-radius: 150px flatten/view /view /view view textborder-radius: 150px与长宽相同形成正圆/text view classdemo-box view classcommon-square styleborder-radius: 150px/view view classcommon-square styleborder-radius: 150px flatten/view /view /view view textborder-radius: 10px包含子视图/text view classdemo-box view classcommon stylemargin-left: 5px;border-radius: 10px view stylebackground-color: wheat;width: 100%;height: 20px;/view /view view classcommon stylemargin-left: 5px;border-radius: 10px flatten view stylebackground-color: wheat;width: 100%;height: 20px; flatten/view /view /view /view view textborder-bottom-left-radius: 10px \nborder-bottom-right-radius: 10px \n(包含子视图/text view classdemo-box view classcommon stylemargin-left: 5px;border-top-left-radius: 10px;border-top-right-radius: 10px view stylebackground-color: wheat;width: 100%;height: 20px;/view /view view classcommon stylemargin-left: 5px;border-top-left-radius: 10px;border-top-right-radius: 10px flatten view stylebackground-color: wheat;width: 100%;height: 20px; flatten/view /view /view /view view texttext组件: border-radius: 10px/text view classdemo-box text classtext-radius styleborder-radius: 10px;文本/text text classtext-radius styleborder-radius: 10px; flatten文本/text /view /view view texttext组件: border-radius: 25px与高度相同形成圆角/text view classdemo-box text classtext-radius-circle styleborder-radius: 25px;文本/text text classtext-radius-circle styleborder-radius: 25px; flatten文本/text /view /view view textimage组件: border-radius: 10px/text view classdemo-box image classimage-radius styleborder-radius: 10px; src/static/test-image/logo.png/image image classimage-radius styleborder-radius: 10px; src/static/test-image/logo.png flatten/image /view /view view textimage组件: border-radius: 100px与长宽相同形成正圆/text view classdemo-box image classimage-radius-circle styleborder-radius: 100px; src/static/test-image/logo.png/image image classimage-radius-circle styleborder-radius: 100px; src/static/test-image/logo.png flatten/image /view /view text classuni-title-text uni-common-mtscroll-view 组件/text view classdemo-box scroll-view classcommon styleborder-radius: 10px; text classcommon-textborder-radius: 10px/text /scroll-view scroll-view classcommon styleborder-radius: 100px; text classcommon-textborder-radius: 100px/text /scroll-view /view view classuni-common-mb textnative-view组件: border-radius: 10px 和 border-top-left-radius: 10px/text view classdemo-box native-view classcommon styleborder-radius: 10px/native-view native-view classcommon styleborder-top-left-radius: 10px/native-view /view /view /view !-- #ifdef APP -- /scroll-view !-- #endif -- /template4.1 正圆、扁圆与超大值圆角示例中三组对照直观呈现了圆角半径与元素宽高的关系border-radius: 150px作用于 150×50 的元素时水平方向被完整裁剪、垂直方向只裁剪一半形成扁圆胶囊同样的150px作用于 150×150 的正方形时恰好形成正圆border-radius: 999px作用于 150×150 的元素时圆角半径超出边界最终同样收敛为正圆——这是设置一个很大的圆角值得到正圆技巧的依据。官方文档 docs/css/border-radius.md 的完整示例中还包含了border-radius: 999px配合border: 1px solid green; border-top-color: red;的多色边框圆角展示以及border-radius: 10rpx的 rpx 单位用法可对照查看。4.2 组件样式定义示例中使用的样式类如下摘自 src/pages/CSS/border/border-radius.uvue 的style块.common { width: 150px; height: 50px; background-color: gray; } .demo-box { flex-direction: row; margin-top: 10px; justify-content: space-around; } .common-square { width: 150px; height: 150px; background-color: gray; } .text-radius { width: 150px; height: 50px; background-color: gray; font-size: 16px; color: black; } .text-radius-circle { width: 150px; height: 25px; background-color: gray; font-size: 16px; color: black; } .image-radius { width: 150px; height: 100px; background-color: gray; } .image-radius-circle { width: 100px; height: 100px; background-color: gray; }五、动态设置与读取 border-radius除了静态样式uni-app x 还支持通过元素对象的style.setProperty()动态设置、以style.getPropertyValue()读取border-radius。示例页面脚本部分演示了在view、text、image三类组件含拍平版本上的完整读写流程关键逻辑如下const getPropertyValues () { data.borderRadiusActual viewRef.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualFlat viewRefFlat.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualText textRef.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualTextFlat textRefFlat.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualImage imageRef.value?.style.getPropertyValue(border-radius) ?? data.borderRadiusActualImageFlat imageRefFlat.value?.style.getPropertyValue(border-radius) ?? } const changeBorderRadius (value: string) { data.borderRadius value viewRef.value?.style.setProperty(border-radius, value) viewRefFlat.value?.style.setProperty(border-radius, value) textRef.value?.style.setProperty(border-radius, value) textRefFlat.value?.style.setProperty(border-radius, value) imageRef.value?.style.setProperty(border-radius, value) imageRefFlat.value?.style.setProperty(border-radius, value) // 使用 nextTick 确保样式已应用后再获取值 nextTick(() { getPropertyValues() }) }配套的枚举值文档版示例包含10rpx、100%等更多取值与输入框示例const borderRadiusEnum: ItemType[] [ { value: 0, name: }, { value: 1, name: 0 }, { value: 2, name: 5px }, { value: 3, name: 20px }, { value: 4, name: 10rpx }, { value: 5, name: 0% }, { value: 6, name: 50% }, { value: 7, name: 100% } ]实战要点元素引用通过ref获取类型为UniElement/UniTextElement/UniImageElement对应view/text/image组件写入后需在nextTick()回调中再读取确保样式已应用到原生渲染层页面就绪阶段可在onReady()中调用一次getPropertyValues()以同步初始值枚举中的第一个空字符串专门用于验证空值情况。六、常见实战场景正圆与百分比裁剪6.1 圆形头像 / 圆形图片让图片显示为正圆的核心是圆角半径不小于元素宽高的一半。由于border-radius取值超过边界时会收敛为正圆实践中两种写法等价.avatar { width: 100px; height: 100px; border-radius: 50%; /* 或 border-radius: 50px */ }6.2 百分比支持的版本边界官方文档 docs/css/border-radius.md 的 tips 明确指出App-Android/iOS 平台从 HBuilderX 5.0 开始支持百分比在 HBuilderX 5.0 之前Android/iOS 如需裁剪正圆图片无法使用50%应改用与图片宽高相同的像素值。例如图片长宽为 250px设置border-radius: 125px即可得到正圆如果无法确定元素宽高如width: auto可以设置一个非常大的圆角半径值例如border-radius: 10000px使显示为正圆鸿蒙平台一直支持百分比。平台差异文档 docs/css/css_diff_web.md 中 圆角百分比支持不完全 一节进一步补充标准 CSS 中border-radius与四个方向的单角圆角属性都支持百分比但在 App 平台仅border-radius简写支持百分比四个方向的单角属性如border-top-left-radius暂不支持百分比。6.3 椭圆胶囊需要长条胶囊如标签、按钮、搜索框时可用与短边相同的圆角值元素高 25px、宽 150px 时设置border-radius: 25px即得圆角胶囊若需要更扁的椭圆弧可使用斜杠语法border-radius: 150px / 25px。七、平台差异与注意事项综合官方文档与平台差异说明使用border-radius时需注意以下几点rpx 单位限制App 平台蒸汽模式不支持 rpx 单位。蒸汽模式下应使用px或百分比其余单位换算在 vdom 模式可用但跨端一致性问题建议统一为px。单角属性不支持百分比Appborder-top-left-radius等四个单角属性在 App 平台不支持百分比仅border-radius简写支持见 docs/css/css_diff_web.md。边框默认颜色差异App 平台border-color系列默认值为#000000而不是标准 CSS 的currentcolor如需边框颜色跟随文字颜色应显式设置参见 docs/css/css_diff_web.md。百分比水平/垂直半径基准百分比中的水平半径基于元素宽度计算、垂直半径基于元素高度计算因此同一百分比在宽高不同的元素上会得到椭圆圆角。子视图裁剪圆角父容器包含子视图时子视图超出圆角边界的部分会被裁剪示例中wheat背景子视图即演示了该行为拍平版本同样支持。scroll-view 与 native-viewscroll-view、native-view同样可以设置border-radius示例中分别以 10px、100px 圆角演示。八、蒸汽模式与 flatten 拍平flatten是蒸汽模式Vapor中控制节点渲染方式的标志为组件添加flatten属性后该节点会被拍平减少原生渲染层级从而提升渲染性能。蒸汽模式即 vue3 去掉虚拟 DOM 的版本配合 App 平台原生渲染管线实现更高性能详见 docs/app-vapor.md。border-radius支持拍平且不属于 不支持拍平的 CSS 属性 列表该列表包含background-clip、transition、z-index、visibility等。但拍平能力有版本要求见上文 3.2 小节 的兼容性表Android(Vapor) 5.21、iOS(Vapor) 5.11、HarmonyOS(Vapor) 5.0。需要拍平的场景建议列表项、单元格等高频复用、层级较深的节点可通过flatten减少层级换取性能但若节点依赖不支持拍平的属性则不应盲目添加flatten。九、参见与延伸阅读主文档docs/css/border-radius.md示例源码src/pages/CSS/border/border-radius.uvue单角圆角文档docs/css/border-top-left-radius.md、docs/css/border-top-right-radius.md、docs/css/border-bottom-left-radius.md、docs/css/border-bottom-right-radius.md圆角百分比差异docs/css/css_diff_web.md蒸汽模式与拍平docs/app-vapor.md边框相关属性docs/css/border.md、docs/css/border-width.md、docs/css/border-style.md、docs/css/box-shadow.md样式清单总览docs/css/README.md【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
