driftPang
driftPang
  • 发布:2026-08-26 15:05
  • 更新:2026-08-26 17:49
  • 阅读:205

border-bottom-right-radius:20px 50% ;是不是不支持这样写

分类:uni-app x

​[plugin:uni:app-uvue-css] ERROR: property value 20px 50% is not supported for border-bottom-right-radius (supported values are: number|pixel|percent)​

这个是报错 但是我看文档上是支持border-bottom-left-radius: <length-percentage>{1,2};的啊

2026-08-26 15:05 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

欢迎到专业群( uni-app x技术交流群 ) 咨询,群中有相关专业的管理员和群友。

是的,App 平台(Android/iOS)目前不支持 border-bottom-right-radius: 20px 50% 这种写法。

你看到的文档语法 border-bottom-right-radius: <length-percentage>{1,2} 是 Web 标准 CSS 的完整语法定义,但 uni-app x 的 App 端实现的是 Web CSS 的子集(ucss),并非完整支持所有标准语法。

具体差异如下:

1. 平台支持差异

  • Web/小程序端:支持完整的 <length-percentage>{1,2} 语法,可以写 20px 50% 表示水平半径 20px、垂直半径 50%(椭圆角)。
  • App 端(Android/iOS):目前仅支持单个值(number | pixel | percent),不支持两个值分别设置水平和垂直半径。
  • HarmonyOS 端:支持百分比。

2. 关于百分比的支持

  • border-radius(简写属性):App-Android/iOS 从 HBuilderX 5.0 起支持百分比(如 border-radius: 50%)。
  • border-top-left-radius 等四个方向的单角属性:App 平台暂不支持百分比,只能使用 number(无单位数字)或 pixel(如 20px)。

解决方案

如果需要在 App 端实现椭圆角效果,目前只能使用单一像素值:

/* App 端只能这样写 */  
.border-radius-elliptic {  
  border-bottom-right-radius: 20px; /* 水平和垂直半径相同 */  
}

本助手使用国产模型,生成代码准确率较低。强烈建议使用uni-agent生成代码

如果确实需要非对称的椭圆圆角(水平 20px、垂直 50%),目前 App 端没有直接的 CSS 支持,可以考虑以下替代方案:

  1. 使用 overflow: hidden 配合子元素绝对定位模拟
  2. 使用图片或 SVG 背景
  3. 使用 canvas 绘制

验证建议
由于 uni-app x 的 CSS 支持会随版本更新,建议查阅最新的 uni-app x CSS 与标准 CSS 的差异 文档,其中明确说明了圆角百分比的支持范围。

内容为 AI 生成,仅供参考
百搜全端云

百搜全端云 - 百搜开发团队

uvue‑css解析器不支持空格分隔双值椭圆圆角,文档语法写了{1,2},但是编译器 bug,不能写 border‑bottom‑right‑radius:20px 50%;(空格分开水平 / 垂直半径)。
现状
Web/H5 浏览器:border‑bottom‑right‑radius:20px 50% 正常生效(空格区分水平、垂直椭圆半径)
uvue(UniApp‑X)编译器直接抛错 property value ... not supported,属于编译器解析缺陷。
两种解决办法
1️⃣改用总简写属性,用/斜杠语法(uvue 支持)
css
/右下:水平20px / 垂直50%;其他角0/
border-radius:0 0 20px/50% 0;
2️⃣降级方案:外层 view 正常矩形,内层 view 做裁切模拟椭圆角,避开单角双参数写法。
注意:不要空格隔开两个值;单角展开属性border‑xxx‑radius uvue 编译器目前不接受空格双参数,文档标注支持,但编译器未实现。

要回复问题请先登录或注册