文章目录

• 目的
• linear-gradient（线性渐变）
• radial-gradient（径向渐变）
• conic-gradient（锥形渐变）
• 总结

目的

对于用户界面开发来说渐变是一种非常常用的功能。CSS中的渐变是一种由一定规则生成的图像（image数据类型），主要分为线性渐变和径向渐变，另外还有个新出的圆锥渐变。

linear-gradient（线性渐变）

线性渐变就是指两种或以上颜色沿着某条直线铺展开来，看下面演示：

线性渐变可以通过填入的第一个参数来改变角度，可以填入角度、朝向、转动度等：

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点，你可以将中点移动到这两个颜色之间的任意位置：

更进一步的你还可以将某种颜色的中心位置放到某个位置：

除了选择颜色的中心位置，你还可以选择颜色非渐变部分的起始与结束位置：

上面演示中两种颜色间缺省的区域将用过度色填充，如果没有缺省的区域则会出现硬边，也可以利用这个特性来做一些比较有意思的东西：

CSS的渐变可以组合起来使用，比如下面这样：


除了基础的 linear-gradient() 外还有 repeating-linear-gradient() 函数可以用于创建重复呈现的过渡效果：

radial-gradient（径向渐变）

径向渐变就是指两种或以上颜色沿着圆心由内而外铺展开来，看下面演示：

和线性渐变一样径向渐变可以设置颜色过度中间点：

和线性渐变一样径向渐变可以设置颜色非渐变部分的起始与结束位置：

和线性渐变一样径向渐变填入的第一个参数可以实现一些特定功能，在径向渐变中这个参数主要可以改变圆心的位置、形状、边缘轮廓的具体位置。
圆心位置可以用尺寸、百分比、方位等来描述；形状可以选圆形（circle）或椭圆形（ellipse）；边缘轮廓的具体位置可选值如下：

取值	说明
closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）
closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交
farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）
farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交

和和线性渐变一样径向渐变也可以组合起来使用：


可以使用 repeating-radial-gradient() 函数创建重复呈现的过渡效果：

conic-gradient（锥形渐变）

锥形渐变和径向渐变某些方便非常相似，区别在于径向渐变依照圆心由内而外过度，而锥形渐变则以圆心和圆周间的扇形区域为过度，看下面演示：

锥形渐变也可以通过第一个参数设置起始角度和圆心：

锥形渐变用在实现色环、饼图、某些loading动画中会比较方便：

总结

渐变的基础内容主要就是这些了，更多的内容可以参考下面链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()
https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient()
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

标签：颜色,gradient,渐变,笔记,线性,06,CSS,径向
来源： https://blog.csdn.net/Naisu_kun/article/details/110622440