前言阴影是 UI 设计中提升视觉层次感的重要手段。“海风日记“在 Color.ets 中定义了完整的阴影颜色令牌体系并在多个组件中使用了不同层级的阴影效果。本文将从源码出发深入讲解阴影属性配置、颜色令牌设计以及多层级阴影的最佳实践。一、阴影属性1.1 基本语法.shadow({ radius: 12, // 模糊半径 color: rgba(160,120,60,0.10), // 阴影颜色 offsetX: 0, // 水平偏移 offsetY: 2 // 垂直偏移 })1.2 参数说明参数类型说明默认值radiusnumber模糊半径值越大阴影越模糊0colorstring阴影颜色支持透明度黑色offsetXnumber水平偏移正数向右0offsetYnumber垂直偏移正数向下0二、阴影颜色令牌2.1 颜色常量// 卡片阴影颜色 export const COLOR_CARD_SHADOW #19A0783C // 阴影颜色 - 不同透明度 export const COLOR_SHADOW_PRIMARY_LIGHT rgba(245,166,35,0.25) export const COLOR_SHADOW_PRIMARY_MID rgba(245,166,35,0.30) export const COLOR_SHADOW_PRIMARY_DEEP rgba(245,166,35,0.40) export const COLOR_SHADOW_AMBER rgba(160,120,60,0.08) export const COLOR_SHADOW_LIGHT rgba(160,120,60,0.06)2.2 阴影层级层级颜色常量效果使用场景浅COLOR_SHADOW_LIGHT极淡阴影设置菜单卡片中COLOR_SHADOW_AMBER柔和阴影正文卡片中高COLOR_CARD_SHADOW标准阴影日记卡片高COLOR_SHADOW_PRIMARY_MID橙色高亮阴影按钮、浮动按钮三、不同场景的阴影配置3.1 日记卡片.shadow({ radius: 12, color: rgba(160,120,60,0.10), offsetY: 2 })3.2 浮动按钮.shadow({ radius: 16, color: rgba(245,166,35,0.40), offsetX: 0, offsetY: 4 })3.3 渐变卡片.shadow({ radius: 20, color: rgba(245,166,35,0.30), offsetY: 6 })3.4 登录按钮.shadow({ radius: 16, color: rgba(245,166,35,0.35), offsetY: 4 })3.5 设置菜单卡片.shadow({ radius: 8, color: rgba(160,120,60,0.06), offsetY: 2 })四、阴影对比场景radiuscoloroffsetY视觉强度设置卡片8极淡2最弱日记卡片12淡2中正文卡片12柔和2中渐变卡片20橙色6强浮动按钮16亮橙4最强五、常见问题5.1 阴影不显示问题设置了shadow属性但阴影不显示。原因shadow 需要配合background使用且背景不能是透明。解决方案确保组件有非透明的背景色。总结本文通过“海风日记“的阴影体系深入讲解了 shadow 属性的配置shadow 属性radius、color、offsetX、offsetY颜色令牌5 个阴影颜色常量多层级阴影从浅到强的 5 个层级场景配置不同组件的阴影参数下一篇文章将深入讲解aboutToAppear 生命周期敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Shadow 属性文档Colors.ets 色彩管理海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区