一、前言
linear-gradient()
:函数用于创建一个表示两种或多种颜色线性渐变的图片。即实现线性渐变!
二、基础用法
默认渐变方向是
从上到下
渐变,这种情况不需要申明渐变方向!
/* 1. 从上到下, 从红色开始,转为黄色,再到蓝色*/
#grad {
background-image: linear-gradient(red, yellow, blue);
}
/* 2. 从左到右,从红色开始,转为黄色 */
#grad {
background-image: linear-gradient(to right, red , yellow);
}
/* 3. 从右上角到左下角的线性渐变 */
#grad {
background-image: linear-gradient(to left top, blue, red);
/*
to left top : 从右下角到左上角的线性渐变;
to right top : 从左下角到右上角的线性渐变;
to left bottom : 从右上角到左下角的线性渐变;
to right bottom : 从左上角到右下角的线性渐变;
*/
}
/* 4. 指定一个角度(选择180deg)的线性渐变 */
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
/* 5. 使用透明度 */
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
三、渐变实现缺角矩形
3.1 基础:从60%的梯度线开始的渐变
有时候我们不希望一开始就出现渐变,可以从中间某个地方开始最好。为了实现这个效果,可以在你希望渐变梯度开始的地方,加上一个同样色值的颜色中间点。
div {
background: linear-gradient(135deg, red, red 60%, blue);
/*
background: linear-gradient(135deg, red 60%, blue); 这样写一样
*/
}
3.2 不需要过渡颜色(不要过渡渐变)
div {
// 偏移135deg;从5%开始渐变; 渐变到蓝色,但是不要过渡(blue 0 :这里的0不能省,表示不要过渡)
background: linear-gradient(135deg, red 5%, blue 0);
}
3.3 实现切角矩形
div {
// 偏移135deg;从30px(实现圆角矩形使用px可精确控制圆角的大小,开始颜色是透明,则不显示,造成了圆角效果)开始渐变; 渐变到蓝色,但是不要过渡(blue 0 :这里的0不能省,表示不要过渡)
background: linear-gradient(135deg, transparent 30px, blue 0);
}
更多特殊效果(参考博客):https://www.cnblogs.com/zhuhuoxingguang/p/6108236.html
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出
对博客文章的参考,若原文章博主介意,请联系删除!请原谅