【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(上)

前言

一直对渐变背景这块比较感兴趣，但是因为每天加班实在太忙了，任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识，一来满足了自己的好奇心，二来可以更加了解这方面的知识。跟更多不断学习的小伙伴们一起进步，一起汲取新的知识。不断成长，不断精进自己的知识。有想一起讨论技术，一起成长的伙伴们，也可以加微信一起交流。各微信群里面，有很多前端领域的大佬，在他们身上学到了很多，今后也努力向他们看齐。不断提升自己。加油。

CSS radial-gradient() 函数

定义与用法

radial-gradient() CSS函数创建了一个图像。

该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。

形状可以是圆形（circle）或椭圆形（ellipse）。

与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。

例如：

1.双色圆形渐变

background: radial-gradient(#e66465, #9198e5);

2.closest-side

渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。

background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

3.cicle圆形渐变

background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

4.ellipse椭圆形

radial gradient 的组成

【解释】：

1. 径向渐变由其中心点、边缘形状轮廓、两个或多个色值结束点定义而成。
2. 为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。
3. 边缘形状可以是圆形（circle）或椭圆形（ellipse）。
4. 色彩结束点位于虚拟渐变射线上，该渐变射线从中心点水平向右延伸。
5. 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。
6. 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。
   基本语法：

radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
eg:radial-gradient(circle at center, red 0, blue, green 100%)

1. 【注意】：gradient属于image类型，所以它可以用于任何适用于image的地方。不能用于 background-color 和其他属性比如color数据类型。

可配置参数

参考资料MND-linear-gradient()：linear-gradient)

径向渐变演示

1. x轴:left: 0% center: 50% right: 100%
2. y轴 0% center: 50% bottom: 100%

在线展示地址

1. 数值

数值:x轴数值表示在x轴上离0点(渐变框左上角)的偏移量；y轴数值表示在y轴上离0点的偏移量。

在线展示地址

1. 使用百分比

其中x轴的百分比相对于渐变框的宽度，而y轴的百分比相对于渐变框的高度。渐变框的宽高由background-size决定。

在线展示地址

1. 单个值
   当只有一个值时，默认第二个值为center。

在线展示地址

1. shape形状
   定义渐变的形状是圆circle或椭圆ellipse。默认是椭圆。

在线展示地址

extent-keyword描述

在线展示地址

线性渐变的色标

与线性渐变的色标相同的部分不再重复，这里只说明不同的部分。由于位置处于100%的色标有时并不会占满渐变区域，则浏览器会默认使用最后一个色标的颜色铺满渐变区域。

在线展示地址

repeating-radial-gradient重复渐变

1. CSS函数repeating-radial-gradient创建一个从原点辐射的重复渐变组成的image 。
2. 它类似于radial-gradient 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。
3. 函数的结果是 gradient数据类型的对象， 是一种特殊的image类型。

示例

/* 一个从容器中心点开始的重复渐变,   从红色开始，渐变到蓝色，再渐变到绿色 */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

1. 每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。
2. 最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。
3. 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

【注】：其他参数使用跟radial-gradient()一致。可参考上面介绍。

径向渐变重复

1. 重复渐变可以实现径向渐变的重复效果，使色标在椭圆方向上无限重复，实现一些特殊的效果。
2. 只有当首尾两颜色位置不在0%或100%时，重复渐变才生效。

background-image: -webkit-repeating-radial-gradient(blue 20%,green 50%);
background-image: repeating-radial-gradient(blue 20%,green 50%);

在线展示地址

linear-gradient()线性渐变

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型，是一种特别的image数据类型。

在线展示地址

参考资料:深入理解CSS径向渐变radial-gradient：linear-gradient

线形渐变的构成

1. 渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。
2. 起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）
3. 终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的。
4. 起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

示例代码

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
linear-gradient(red 10%, 30%, blue 90%);
linear-gradient(red 40%, yellow 30%, blue 65%);
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

使用语法

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]