如何实现渐变的圆角边框？

Question

如何实现渐变的圆角边框

Answer 1

解决方案

通过设置容器的渐变色然后设置组件的渐变色即可。

代码示例

![](b8c882ff92355024ffbb446090f27675.emf)@Entry   
@Component   
struct Index {   
 build() {   
 Row() {   
 Column() {   
 Column({ space: 5 }) {   
 Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)   
 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]]   
 })   
 .justifyContent(FlexAlign.Center)   
 }   
 }   
 .width('100%')   
 }   
 .height('100%')   
 }   
}

参考链接

颜色渐变