【HarmonyOS】仿前端css中的背景色渐变两层叠加
/* * 前端css中的背景色渐变两层叠加效果 * <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gradient Background Test</title> <style> .gradient-background { width: 100%; height: 100vh; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f3f5f7 100%), linear-gradient(58deg, #4966ff 1%, #3489ff 50%, #28b2ff 100%); } </style> </head> <body> <div> <h1>测试</h1> </div> </body> </html> * */ @Entry @Component struct Page64 { build ( ) { Column ( ) { Text ( '仿前端css中的背景色渐变两层叠加' ) Stack ( ) { Text ( ) . width ( '100%' ) . height ( '100%' ) . linearGradient ( { angle : 58 , colors : [ [ 0x4966ff , 0.0 ] , [ 0x3489ff , 0.5 ] , [ 0x28b2ff , 1.0 ] ] } ) Text ( ) . width ( '100%' ) . height ( '100%' ) . linearGradient ( { angle : 180 , colors : [ [ 'rgba(255, 255, 255, 0)' , 0.0 ] , [ 0xf3f5f7 , 1.0 ] ] } ) Text ( '测试' ) } . width ( '200lpx' ) . height ( '200lpx' ) } . height ( '100%' ) . width ( '100%' ) } }
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/24984661/viewspace-3107436/ ，如需转载，请注明出处，否则将追究法律责任。
最新文章
- Agent 重塑数据底座，亚马逊云科技拆解 AI 数据库落地路径
- 鸿蒙开发HarmonyOS3.1 API8-》API9_鸿蒙api
- 探秘鸿蒙 HarmonyOS NEXT：如何发布一个 HarmonyOS 应用
- HarmonyOS NEXT～鸿蒙应用上架指南：HarmonyOS应用发布全流程解析
- 【HarmonyOS 5】鸿蒙中@State的原理详解
- 【HarmonyOS 5】鸿蒙中如何使用MQTT
- 《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》学习笔记
- 【HarmonyOS NEXT】鸿蒙应用使用lottie动画
- 原生鸿蒙操作系统HarmonyOS NEXT（HarmonyOS 5）正式发布
- 【HarmonyOS NEXT】鸿蒙应用实现截屏
