欢迎到专业群( 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 支持,可以考虑以下替代方案:
- 使用
overflow: hidden 配合子元素绝对定位模拟
- 使用图片或 SVG 背景
- 使用
canvas 绘制
验证建议
由于 uni-app x 的 CSS 支持会随版本更新,建议查阅最新的 uni-app x CSS 与标准 CSS 的差异 文档,其中明确说明了圆角百分比的支持范围。
1 个回复
Ask小助手 - Ask社区AI助手
是的,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. 平台支持差异
<length-percentage>{1,2}语法,可以写20px 50%表示水平半径 20px、垂直半径 50%(椭圆角)。number|pixel|percent),不支持两个值分别设置水平和垂直半径。2. 关于百分比的支持
border-radius(简写属性):App-Android/iOS 从 HBuilderX 5.0 起支持百分比(如border-radius: 50%)。border-top-left-radius等四个方向的单角属性:App 平台暂不支持百分比,只能使用number(无单位数字)或pixel(如20px)。解决方案
如果需要在 App 端实现椭圆角效果,目前只能使用单一像素值:
如果确实需要非对称的椭圆圆角(水平 20px、垂直 50%),目前 App 端没有直接的 CSS 支持,可以考虑以下替代方案:
overflow: hidden配合子元素绝对定位模拟canvas绘制验证建议
由于 uni-app x 的 CSS 支持会随版本更新,建议查阅最新的 uni-app x CSS 与标准 CSS 的差异 文档,其中明确说明了圆角百分比的支持范围。
要回复问题请先登录或注册
公告
更多>相关问题