HarmonyOS 怎么设置带圆角的渐变边框

1.怎么设置带圆角的渐变边框?

2.BorderImage 为什么会往下偏移,怎么调整?搞两层渐变的背景能实现,但是带透明度就不行了。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

设置带圆角的渐变边框可以采用渐变色linearGradient来实现,参考demo如下

@Entry
@Component
struct BorderDemo {
  build() {
    Column() {
        Row(){
          Text('This is gradient color.')
            .textAlign(TextAlign.Center)
            .width('96%')
            .height('80%')
            .borderRadius(30)
            .linearGradient({
              direction: GradientDirection.Left, // 渐变方向
              repeating: true, // 渐变颜色是否重复
              colors: [[0xDCDCDC, 0.0],  [0xFFFFFF, 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
            })
        }
        .width('90%')
        .height(60)
        .borderRadius(30)
        .linearGradient({
          angle: 90,
          colors: [[0x87CEEB, 0.0], [0x2E8B57, 1.0]]
        })
        .opacity(0.6)
        .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
如何实现渐变圆角边框
2536浏览 • 1回复 待解决
HarmonyOS 图片背景及边框圆角设置问题
1033浏览 • 1回复 待解决
如何设置边框颜色为渐变色?
508浏览 • 1回复 待解决
HarmonyOS CustomDialog怎么设置圆角
42浏览 • 1回复 待解决
类似边框颜色线性渐变
665浏览 • 1回复 待解决
如何绘制圆角矩形
395浏览 • 1回复 待解决
怎么给组件设置边框
6904浏览 • 1回复 待解决
Text怎么设置文本渐变
287浏览 • 0回复 待解决
HarmonyOS stack设置圆角不生效
64浏览 • 1回复 待解决
HarmonyOS WebView 圆角设置失效
104浏览 • 1回复 待解决
HarmonyOS 悬浮窗圆角怎么处理?
65浏览 • 1回复 待解决
HarmonyOS span中如何设置圆角
468浏览 • 1回复 待解决
HarmonyOS 如何设置渐变背景色?
955浏览 • 1回复 待解决
Rect设置渐变显示异常
297浏览 • 0回复 待解决
ArkUI(ets)怎么实现右边框
3607浏览 • 1回复 待解决
HarmonyOS 文本渐变怎么处理
52浏览 • 1回复 待解决
HarmonyOS column设置圆角不起作用
541浏览 • 1回复 待解决
UIAbility是否可以设置圆角
1912浏览 • 1回复 待解决