HarmonyOS 鸿蒙Next 在使用borderimage的前提下，如何设置圆角

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 在使用borderimage的前提下，如何设置圆角

在使用borderimage的前提下，如何设置圆角 Row设置了borderimage，但是需要圆角，目前没找到对应api可以显示圆角的，borderRadius设置后无效，目前只能通过UI覆盖来实现渐变的圆角效果，有对应的API嘛？

Harmonyos Next教程
2 回复
您试试下面的方法，看看能否实现您的需求
深色代码主题
复制
// xxx.ets

@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({


            <span class="hljs-attr">direction</span>: <span class="hljs-title class_">GradientDirection</span>.<span class="hljs-property">Left</span>, <span class="hljs-comment">// 渐变方向</span>
            <span class="hljs-attr">repeating</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 渐变颜色是否重复</span>
            <span class="hljs-attr">colors</span>: [[<span class="hljs-number">0xDCDCDC</span>, <span class="hljs-number">0.0</span>], &nbsp;[<span class="hljs-number">0xFFFFFF</span>, <span class="hljs-number">1.0</span>]] <span class="hljs-comment">// 数组末尾元素占比小于1时满足重复着色效果</span>

          })

      }
      .<span class="hljs-title function_">width</span>(<span class="hljs-string">'90%'</span>)
      .<span class="hljs-title function_">height</span>(<span class="hljs-number">60</span>)
      .<span class="hljs-title function_">borderRadius</span>(<span class="hljs-number">30</span>)
      .<span class="hljs-title function_">linearGradient</span>({
        <span class="hljs-attr">angle</span>: <span class="hljs-number">90</span>,
        <span class="hljs-attr">colors</span>: [[<span class="hljs-number">0x87CEEB</span>, <span class="hljs-number">0.0</span>], [<span class="hljs-number">0x2E8B57</span>, <span class="hljs-number">1.0</span>]]
      })
      .<span class="hljs-title function_">justifyContent</span>(<span class="hljs-title class_">FlexAlign</span>.<span class="hljs-property">Center</span>)

    }
  }
  .<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>)
}
.<span class="hljs-title function_">height</span>(<span class="hljs-string">'100%'</span>)

}
}

BorderImageOption没有属性去设置圆角

参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-border-image-V5#borderimageoption%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

更多关于HarmonyOS 鸿蒙Next 在使用borderimage的前提下，如何设置圆角的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，若在使用borderimage的前提下需要设置圆角，可以通过组合使用border-image属性和CSS的border-radius属性来实现。border-image用于定义边框的图像，而border-radius则用于设置元素的圆角。

示例代码如下：

.element {
    /* 定义边框图像 */
    border-image: url('path/to/your/image.png') 30 30 round;
    /* 设置边框宽度 */
    border-width: 10px;
    /* 设置圆角半径 */
    border-radius: 20px;
}

其中：

  • url('path/to/your/image.png')：边框图像的路径。
  • 30 30：边框图像的分割线，用于定义边框图像的边界。
  • round：边框图像的平铺方式，round表示图像会缩放以适应边框区域。
  • border-width: 10px：边框的宽度。
  • border-radius: 20px：设置圆角的半径，数值越大，圆角越明显。

请注意，border-image和border-radius的属性值需根据实际设计需求进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部