【青训营】- CSS 渐变类型

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

CSS 的渐变效果是属于background-image的属性值
其中包括三种渐变方式，分别为：

• linear-gradient（线性渐变）
• radial-gradient（径向渐变）
• conic-gradient（角向渐变）

1. linear-gradient（线性渐变）

background-image: linear-gradient( [<angle> | to <corner>]? , <color-list>... )
复制代码

• angle: 渐变角度（选填），渐变方向为顺时针
• corner: 渐变方向（选填），接受 top，bottom，left，right，left top，left bottom，top right，bottom right 8 种值
• color-list: 要渐变的颜色块（多个）

例如：

 background: linear-gradient(135deg,#2b5876,#4e4376);    /* 渐变角度 135deg, 渐变色 #2b5876 - #4e4376 */
复制代码

得到的结果：

水
角度在不设置的情况，默认为to bottom，即和180deg相同效果

一个渐变色块color-item，可以分成三部分

• color: 当前位置的颜色
• percentage: 当前颜色在渐变中所占比例（选填）
• length: 当前颜色在渐变中的长度（选填）

例如：

可以制作一些十分好看的效果

还有一种可进行重复的线性渐变：

background-image: repeating-linear-gradient(45deg, red, blue);
复制代码

可以进行重复的线性渐变

2. radial-gradient（径向渐变）

background-image: radial-gradient(shape size at position, color-list...);
复制代码

• shape: 确定圆的类型，分为ellipse（默认）椭圆形和 circle圆形
• size : 渐变大小，值可能为：
  • arthest-corner : 默认，指定径向渐变的半径长度为从圆心到离圆心最远的角
  • closest-side : 指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner :  指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthese-side : 指定径向渐变的半径长度为从圆心到离圆心最远的边
• position: 定义渐变的圆心位置，值可能为：
  • center : 默认，从中间为圆心
  • top : 设置顶部为圆心
  • bottom : 设置底部为圆心

  也可设置百分比（从左上角开始计算）来确定圆心

• color-list : 渐变色的色彩列表，每个色块可以看作一个color-item，包含了两个值<color, [size]>
  • color : 当前渐变的颜色
  • size: 当前渐变色所占大小

例如：

background-image: radial-gradient( #E94E65, #1574A8);
复制代码

就会得到
了

3. conic-gradient（角向渐变）

注意：请在高版本的chrome中使用
看看他最常用的api：

background: conic-gradient(deeppink, yellowgreen);
复制代码

得到结果:
一

是往一个方向进行旋转渐变（默认顺时针）

同样，渐变色列表中每个色块都可以看作一个color-item，包含了两种值<color, size>

• color: 当前渐变色的颜色
• size: 当前渐变色所占比例（百分比或固定大小）

例如：

background-image: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%;
width: 200px;
height: 200px;
复制代码

得到：

这里表示：

1. 0-30% 的区间使用 
2. deeppink0-70% 的区间使用 
3. yellowgreen0-100% 的区间使用 teal

当你想进行重复的角向渐变的时候，可以使用repeating-conic-gradient进行

background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
复制代码

得到效果：
篇

有什么问题希望大家可以在评论区指出，我及时纠正。（狗头）

新人上路，还请多多包含。
我是MoonLight，一个初出茅庐的小前端。