HarmonyOS 鸿蒙Next：outline只设bottom宽度和颜色，设置圆角后圆角处颜色始终是黑色

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：outline只设bottom宽度和颜色，设置圆角后圆角处颜色始终是黑色

outline 只设bottom宽度和颜色，设置圆角后圆角处颜色始终是黑色、如何圆角处同底部设置的颜色

Text("A")
    .fontSize(12)
    .fontColor("#222222")
    .textAlign(TextAlign.Center)
    .borderRadius(4)
    .outline({
        width: {
            bottom: 1
        },
        color: {
            bottom: "#868A8D"
        },
        radius: {
            bottomLeft: 4,
            bottomRight: 4
        },
        style: {
            bottom: OutlineStyle.SOLID
        }
    });
Harmonyos Next教程
2 回复 
[@Entry](/user/Entry)
[@Component](/user/Component)
struct OutlineExample {
 build() {
     Column() {
         Flex({ 
             justifyContent: FlexAlign.SpaceAround, 
             alignItems: ItemAlign.Center 
         }) 
         .width('100%')
         .height(150);

         Text('.outline')
             .backgroundColor('#868A8D')
             .fontSize(50)
             .width(300)
             .height(300)
             .outline({
                 width: { bottom: 15 },
                 color: { bottom: "#868A8D" },
                 radius: { 
                     bottomLeft: 4, 
                     bottomRight: 4, 
                     topLeft: 1, 
                     topRight: 2 
                 },
                 style: {
                     bottom: OutlineStyle.SOLID
                 }
                 // width: { bottom: 15 },
                 // color: { right: Color.Blue },
                 // radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
                 // style: {
                 //     right: OutlineStyle.DOTTED,
                 //     top: OutlineStyle.SOLID,
                 // }
             }).textAlign(TextAlign.Center);
     }
 }
}

只要让.backgroundColor与color: { bottom: """"}保持一致就可以

在HarmonyOS鸿蒙Next系统中，若你在使用outline设置组件时，仅指定了bottom的宽度和颜色，并在组件上应用了圆角效果，发现圆角处的颜色始终是黑色，这可能是由于outline的绘制方式以及系统渲染引擎的特性导致的。

Outline通常用于绘制元素的边框，但它并不支持直接设置圆角属性。当你为元素添加圆角时，这通常是作用于元素的背景或边框本身，而非outline。由于outline是绘制在元素边框之外的，且不受元素圆角属性的影响，因此它可能会以直角形式出现，并在圆角处产生视觉上的“黑色”效果（实际上是背景色或下层元素的颜色透过未覆盖部分显示）。

要解决这个问题，你可以考虑以下几种方法：

  1. 使用边框（border）而非outline：直接为元素设置带圆角的边框，这样边框会随元素的圆角而弯曲。

  2. 利用伪元素：通过CSS伪元素（如::before或::after）来模拟outline效果，并为其设置圆角。

  3. 调整背景色或下层元素：确保背景色或下层元素的颜色与outline的颜色协调，以减少视觉上的突兀感。

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

回到顶部