driftPang
driftPang
  • 发布:28 分钟前
  • 更新:27 分钟前
  • 阅读:30

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};的啊

28 分钟前 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( 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 生成,仅供参考

要回复问题请先登录注册