CSS梯度

这个 坡度 在CSS中，是一种特殊类型的图像，由两种或多种颜色之间的渐进平滑过渡组成。CSS是为各种web文档添加样式的方法。通过使用CSS中的渐变，我们可以创建不同的图像样式，这有助于制作一个有吸引力的网页。

渐变可分为两种类型：

线性渐变 : 它包括向上、向下、向左、向右和对角的平滑颜色过渡。创建线性渐变所需的最小双色。线性渐变中可以有两个以上的颜色元素。渐变效果需要起点和方向。

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性梯度可以通过以下方式实现：

自上而下： 在这张图片中，过渡从白色开始，以绿色结束。在交换颜色序列时，过渡将以绿色开始，以白色结束。

例子： 这个例子说明了 线性梯度 从顶部开始，从底部结束，从白色开始，过渡到绿色。

输出：

从左到右： 在这张图中，过渡从左到右开始。它从白色过渡到绿色。

例子： 这个例子说明了 线性梯度 从左边开始，到右边结束。

输出：

对角线的： 这个转变从左上角开始到右下角。它从绿色过渡到白色开始。对于对角线渐变，需要指定水平和垂直起始位置。

例子： 这个例子说明了 线性梯度 通过指定水平和垂直起始位置，使用对角线过渡。

输出：

重复线性渐变： CSS允许用户使用单个函数repeating-linear-gradient（）实现多个线性渐变。这里的图像在每个过渡中包含3种颜色，并带有一定的百分比值。

例子： 这个例子说明了 线性梯度 通过实现多色来实现重复的过渡效果。

输出：

线性渐变上的角度： CSS允许用户在线性渐变中实现方向，而不是将自己局限于预定义的方向。

例子： 这个例子说明了 线性梯度 通过在线性渐变上实现方向。

输出：

CSS径向梯度 : 径向渐变与线性渐变不同。它从一个点开始向外散发。默认情况下，渐变将是椭圆形，大小将是最远的角。第一种颜色从元素的中心位置开始，然后向元素的边缘渐变为结束颜色。在指定之前，褪色的速度是相等的。

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向梯度可以通过以下方式实现：

径向渐变–均匀间隔的颜色停止： 在CSS中，默认情况下，淡入淡出的速度是相等的。下图显示了具有均匀颜色停止的径向渐变。

颜色停止： 颜色停止通知浏览器在渐变的起点使用什么颜色&在哪里停止。默认情况下，它们的间距是相等的，但我们可以通过提供特定的颜色停止来否决它。

例子： 这个例子说明了 径向梯度 具有均匀分布的色块。

输出：

径向渐变-间距不均匀的色块： CSS允许用户在应用径向渐变功能时改变颜色停止的间距。

例子： 这个例子说明了 径向梯度 具有间隔不均匀的色块。

输出：

支持的浏览器：

• 谷歌Chrome 26.0
• 微软Edge 12.0
• Firefox 16.0
• 歌剧12.1
• Internet Explorer 10.0
• Safari 6.1