css中的渐变 - 技术栈

文章目录

一、linear-gradient
二、radial-gradient
三、conic-gradient

css渐变提供了比较复杂多变的颜色背景，可以构造丰富的UI样式

一、linear-gradient

方向变量比较好理解，默认to bottom，从上至下，相当于180deg；

角度是基于0deg确定，正值表示顺时针转动（注意是依据0deg的初始状态开始转动）

javascript 复制代码

/* 线性渐变 */
/* 线性渐变的语法：background: linear-gradient(direction, color-stop1, color-stop2, ...); */
/* color-stop: 颜色，可以是颜色值或百分比，百分比是相对于整个宽度的比例，0%表示起点，100%表示终点 */
/* 默认方向是从上到下，默认deg是0deg，注意0deg是从下到上 */
/* 注意百分比指的是他与两侧颜色的中点，不包括模糊的部分，所以看起来分隔不明显；px规定模糊距离，依旧会类似换算成百分比 */
/* 如果不写px和百分比，多个颜色会自动平分模糊距离 */
/* background: linear-gradient(to right bottom, #00bfff 20%, pink 50px, yellow, green); */
background: linear-gradient(0deg, #00bfff 20%, pink 50px, yellow, green);

0deg

45deg

二、radial-gradient

默认圆心就在正中央，可以自定义圆心位置

javascript 复制代码

  /* 径向渐变 */
  /* 圆形中点可以自定义规定，也可以不写，默认是中心；at 50px 50px 指的是圆心位置 */
  /* circle 制定为圆形，否则根据容器大小自动变为椭圆；默认是ellipse 椭圆形 */
  /* 100%指的是圆心射线到容器边缘交点的距离，根据这个距离为基础再确定渐变的结束终点*/
  /* farthest-corner 离圆心最远的角，渐变的结束形状和容器最远角相交（应该是角顶点），意味着圆心和角连线距离就是100%距离 */
  /* closest-corner 离圆心最近的角，渐变的结束形状和容器最近角相交，意味着圆心和角连线距离就是100%距离 */
  /* farthest-side 离圆心最远的边，渐变的结束形状和容器最远边相切，意味着圆心和最远边垂线距离就是100%距离 */
  /* closest-side 离圆心最近的边，渐变的结束形状和容器最近边相切，意味着圆心和最近边垂线距离就是100%距离 */

  /* background: radial-gradient(circle farthest-corner at 50px 50px, #00bfff 10%, pink 20%, yellow 60%); */
  
  /* 基础写法 */
  /* background-image: radial-gradient(cyan 50%, blue 80%); */

farthest-corner 100%

三、conic-gradient

起始点在中点，顺时针展示颜色选项；

默认0deg；正值表示顺时针转动

径向渐变是沿着半径方向渐变，锥形渐变是沿着角度方向渐变

javascript 复制代码

  /* 锥形渐变 */
  background: conic-gradient(from 0deg, red, orange 50%, yellow 85%, green);

0deg

45deg