div {
width: 200px;
height: 200px;
background:linear-gradient(to bottom right, #fff 0%, #fff 49.9%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%);
}
效果如下：
image.png
简单介绍这个效果用到的线性渐变属性：
渐变方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient的第一个传参是direction，控制渐变的方向，默认从上到下渐变，上图效果使用的是对角渐变。to bottom right 顾名思义，“去到右下”，从左上到右下。
渐变的颜色
渐变支持传入多个颜色值，而且可以控制从0-100%分别展示什么颜色。如果只将渐变颜色设置成 #fff -> rgba(148,88,255,1) -> rgba(185,88,255,1)，效果就会变成如下：
background:linear-gradient(to bottom right, #fff 0%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%);
这里我利用了“两个相同颜色的渐变 = 没有渐变”的效果，使用两个白色连续渐变，就实现了图1的效果。
实验的时候发现，可以直接从50%开始设置，也能实现一样的效果：
background:linear-gradient(to bottom right, #fff 50%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%);
网友评论