uni-app中text标签不支持background-clip: text，需改用view实现渐变文字；H5需display:inline-block，小程序需canvas降级，且须兼顾无障碍。
uni-app里text标签不支持background-clip: text
直接给<text>加background-image和background-clip: text在uni-app所有端都不生效。原因很实在：小程序端<text>是原生组件，不支持CSS裁剪；H5端虽能渲染但会被webview层叠逻辑截断；App端更依赖原生导航栏或view模拟，根本没走标准DOM流。
用view + background-clip实现标题文字渐变
必须放弃<text>，改用<view>包裹文字，并手动处理字体渲染兼容性：
- 把标题文字放进
<view class="title-text">我的页面</view>，而非<text> - 样式中用
background: linear-gradient(...)+-webkit-background-clip: text+color: transparent - H5端需加
display: inline-block或inline-flex确保裁剪生效 - 微信小程序真机上
-webkit-background-clip仅iOS 14+部分支持，Android基本无效——得降级为纯色或用canvas生成文字图
示例关键样式：
.title-text {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
font-weight: bold;
}
小程序端fallback方案：用canvas动态绘字
当background-clip失效时，唯一稳定跨端的方式是Canvas绘图：
- 创建一个
<canvas canvas-id="titleCanvas">，宽高按字号+padding预留 - 在
onReady中调用uni.createCanvasContext('titleCanvas') - 用
ctx.setTextAlign('center')、ctx.setFontSize(16)、ctx.setFillStyle('linear-gradient(...))'（注意：canvas不支持CSS渐变，得用ctx.createLinearGradient()） - 最后
ctx.fillText('我的页面', width/2, height/2 + 6)（+6是baseline偏移补偿） - 安卓真机上canvas文字抗锯齿差，建议字号≥14，避免细线模糊
渐变标题+滚动联动时的坑
如果标题渐变要随页面滚动变化（比如透明度叠加），别直接在onPageScroll里反复调用ctx.draw()——每帧重绘Canvas会卡顿。正确做法是：
- 只在
scrollTop跨越阈值（如0→10px、10→50px）时才触发一次重绘 - 把渐变色计算逻辑抽到
computed或ref中，避免每次滚动都new Gradient - iOS Safari对
canvas 2d的createLinearGradient有缓存bug，同一canvas多次调用需清空再重置
最常被忽略的是：Canvas文字无法选中、无法被屏幕阅读器识别，无障碍场景下必须额外加一层不可见的<view aria-hidden="true">做语义兜底。
