我的学习笔记——CSS背景渐变(Gradients)详解
一.线性渐变(Linear Gradients)
1.语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
2.方向direction :向下/向上/向左/向右/对角方向,默认方向为从上至下
①向下线性渐变(默认)
background:linear-gradient(pink,DeepSkyBlue);
②向上线性渐变
background:linear-gradient(to top,pink,DeepSkyBlue);
③向左线性渐变
background:linear-gradient(to left,pink,DeepSkyBlue);
④向右线性渐变
background:linear-gradient(to right,pink,DeepSkyBlue);
⑤对角方向线性渐变
补充:关于对角的定义,来自菜鸟https://www.runoob.com/css3/css3-gradients.html
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
但是,请注意很多浏览器(Chrome、Safari、firefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。
background:linear-gradient(45deg,pink,DeepSkyBlue);
3.颜色
使用多个颜色
background:linear-gradient(to right,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);
background:linear-gradient(135deg,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);
4.支持透明度设置
background:linear-gradient(rgba(255,182,193,0.7),rgba(0,191,255,0.7));
5.支持设置纯色
//使用像素点设置
background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);
//使用百分比设置
background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);
6.重复的线性渐变repeating-linear-gradient
background:repeating-linear-gradient(to right,pink 10%,DeepSkyBlue 20% );
二. 径向渐变(Radial-Gradient)
1.语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
2.方向
由里向外渐变
background:radial-gradient(pink ,DeepSkyBlue );
3.设置固定颜色
background:radial-gradient(pink 50px,DeepSkyBlue 50px );
4.形状
①默认为elipse椭圆.
background:radial-gradient(pink ,DeepSkyBlue );
②circle圆形.
background:radial-gradient(circle,pink ,DeepSkyBlue );
5.支持多个颜色
background:radial-gradient(circle,pink,DeepSkyBlue,Aqua,Gold,OrangeRed );
6.支持纯色样式
background:radial-gradient(circle,pink 50px,DeepSkyBlue 50px ,DeepSkyBlue 100px );
7.第一个参数shape size at position
①第一个参数的第一个参数 shape:设置形状 cicle圆形或者默认椭圆
②第一个参数的第二个参数 size:设置半径
传一个值
background:radial-gradient(200px,pink ,DeepSkyBlue );
半径传两个值:默认椭圆,第一个表示横向半径,第二个表示纵向半径
③关键字 closest-side/closest-corner/farthest-side/farthest-corner ,这个取决于圆心的位置,圆心的位置表示前面要加at
closest-sid取圆心距离边框最近的的距离作为渐变的半径
farthest-side取圆心位置距离边框最长的距离作为渐变的半径
closest-corne取圆心位置距离最短的角的距离作为渐变的半径
farthest-corner取圆心位置距离最长的角的距离作为渐变的半径
/*closest-side取圆心位置距离边框最短的距离作为渐变的半径*/
background: radial-gradient(closest-side, pink, Deepskyblue);
/*40%只写一个表示圆心位置为40% 50% 取最短则为40%*/
background: radial-gradient(closest-side circle at 40%, pink, Deepskyblue);
background: radial-gradient(closest-side circle at 20% 30%, pink, Deepskyblue);
/*closest-corne取圆心位置距离最短的角的距离作为渐变的半径*/
background: radial-gradient(closest-corner, pink, Deepskyblue);
background: radial-gradient(closest-corner circle at 40%, pink, Deepskyblue);
background: radial-gradient(closest-corner circle at 10% 10%, pink, Deepskyblue);
/*farthest-side取圆心位置距离边框最长的距离作为渐变的半径*/
background: radial-gradient(farthest-side, pink, Deepskyblue);
background: radial-gradient(farthest-side circle at 40%, pink, Deepskyblue);
background: radial-gradient(farthest-side circle at 20% 80%, pink, Deepskyblue);
/*farthest-corner取圆心位置距离最长的角的距离作为渐变的半径*/
background: radial-gradient(farthest-corner, pink, Deepskyblue);
background: radial-gradient(farthest-corner circle at 40%, pink, Deepskyblue);
background: radial-gradient(farthest-corner circle at 10% 80%, pink, Deepskyblue);
8.重复的径向渐变
background: repeating-radial-gradient(pink 10%,Deepskyblue 20%);
3D球
border-radius: 50%;
background: radial-gradient(200px circle at 50px 50px ,rgba(0,191,255,0.1),rgba(0,191,255,0.9));
box-shadow: 2px 2px 5px 1px deepskyblue;