仿前端css中的背景色渐变两层叠加
/*
* 前端css中的背景色渐变两层叠加效果
*
<!DOCTYPE html>
<html lang="en">
<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 class="gradient-background">
<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%')
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。