uniapp-css多颜色渐变：左右+上下

最新推荐文章于 2024-06-20 11:21:40 发布

耶啵奶膘

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量644

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/xulihua_75/article/details/138213969

版权

CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

案例展示

在这里插入图片描述

案例代码：

代码灵感：使用伪类进行处理

<view class="headBox"></view>

.headBox {
	height: 200rpx;
	background: linear-gradient(to right, #D3D5F0, #F0DCF3, #F7F6FB, #DAE8F2, #E1D3EE);
	position: relative;
}

.headBox::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width:100%;
	height:100rpx;
	background:linear-gradient(to bottom, #ffffff00, #F8F8F8);
}