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

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

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

HarmonyOS
2024-12-20 16:14:00
浏览
收藏 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
微信
回复
2024-12-20 18:51:48
相关问题
如何实现渐变圆角边框
2856浏览 • 1回复 待解决
HarmonyOS 图片背景及边框圆角设置问题
1650浏览 • 1回复 待解决
如何设置边框颜色为渐变色?
856浏览 • 1回复 待解决
HarmonyOS 怎么设置圆形边框
352浏览 • 1回复 待解决
类似边框颜色线性渐变
992浏览 • 1回复 待解决
如何绘制圆角矩形
681浏览 • 1回复 待解决
HarmonyOS CustomDialog怎么设置圆角
456浏览 • 1回复 待解决
怎么给组件设置边框
7222浏览 • 1回复 待解决
HarmonyOS clearRect清除区域如何圆角
162浏览 • 1回复 待解决
Text怎么设置文本渐变
784浏览 • 0回复 待解决
HarmonyOS bindSheet怎么设置圆角大小
220浏览 • 1回复 待解决
HarmonyOS 背景半透明渐变怎么设置
415浏览 • 1回复 待解决
HarmonyOS Progress设置渐变无效
182浏览 • 1回复 待解决
HarmonyOS WebView 圆角设置失效
456浏览 • 1回复 待解决
HarmonyOS Canvas如何设置圆角
359浏览 • 1回复 待解决
HarmonyOS 悬浮窗圆角怎么处理?
683浏览 • 1回复 待解决
Rect设置渐变显示异常
649浏览 • 0回复 待解决