鸿蒙Next如何实现边框阴影效果

在鸿蒙Next开发中，想给组件添加边框阴影效果，但尝试了常见的样式属性都没成功。请问具体应该如何实现？是否需要使用特定的API或自定义绘制？能否提供示例代码说明？

2 回复

鸿蒙Next实现边框阴影？简单！用shadow属性，像这样：

.shadow-box {
  shadow: 5px 5px 10px #888888;
}

参数分别是：水平偏移、垂直偏移、模糊半径、颜色。记得在组件上设置borderRadius让阴影更圆润！搞定～

更多关于鸿蒙Next如何实现边框阴影效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过shadow属性为组件添加边框阴影效果，支持设置阴影的颜色、半径、偏移等参数。以下是具体实现方法：

1. 基础阴影效果

使用shadow属性快速添加阴影：

@Component
struct ShadowExample {
  build() {
    Column() {
      Text('阴影效果')
        .width(100)
        .height(100)
        .backgroundColor(Color.White)
        .shadow({
          radius: 10,      // 阴影模糊半径
          color: Color.Black, // 阴影颜色
          offsetX: 5,      // X轴偏移
          offsetY: 5       // Y轴偏移
        })
    }
  }
}

2. 阴影参数说明

  • radius: 阴影模糊半径（数值越大越模糊）
  • color: 阴影颜色（支持RGB/十六进制）
  • offsetX/Y: 阴影偏移量（正值为右下方向）

3. 注意事项

  • 阴影效果需要组件设置背景色才会生效
  • 可通过组合不同参数实现立体感/悬浮效果
  • 建议阴影颜色使用半透明色值（如’#50000000’）

示例效果：创建一个白色方块带灰色阴影，呈现悬浮卡片效果。

回到顶部