我的学习笔记——CSS背景渐变(Gradients)详解

我的学习笔记——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;