谈谈css中的渐变-一一网

css渐变让开发得以通过css代码来绘制简单渐变图形的能力，并且支持组合成更复杂的图形。本文介绍一下css渐变的定义、分类以及相应的语法，并在文末展示几个使用渐变的例子。

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

什么是渐变

W3C是这么给渐变下定义的：渐变是一从一个颜色平滑过渡到另一个颜色的图片（A gradient is an image that smoothly fades from one color to another）。

因此渐变在css里是被视为图像的，任何可以用到图像的地方都可以使用渐变.

例如，渐变可作为背景图像：

/* 一个从上到下由黑色过渡到白色的渐变 */
gradient-as-bgimg{
    background:linear-gradient(#000,#fff);
}
复制代码

为什么需要渐变

前文已经提到渐变是一种图像，它通过几行css代码就可以实现一些丰富的图像效果。某种程度上可以替代外部图片的作用。

相对外部图片，它的优点有：

通过代码实现，无需额外的带宽消耗
更好维护，由于是代码实现UI效果，修改也比较方便
由于是代码实现，无需担心图像的质量降损（模糊等问题）

再者，将一些图片换成渐变对页面的资源加载也是不错的减负。

渐变的分类

css里渐变分为两种：线性渐变和径向渐变。

线性渐变

线性渐变有三个重要的概念：

渐变方向，下图用蓝色粗线表示。可以通过角度或者关键字设定
渐变的端点（起点和终点）末端切线与渐变方向的交点，下图红色圆圈标记
颜色位置点。端点内的任何位置。可以用像素表示位置点，也可以用百分比表示。两个位置点之间的部分会自动进行颜色插值，即颜色的过渡或渐变

线性渐变.png
线性渐变的语法为:

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
复制代码

第一部分指定渐变方向：

to left表示从左到右
to right表示从右到左
to right bottom表示从左上角到右下角（对角线）

第二部分指定了单色位置停留点，可以有多个颜色段。

对于某个颜色区段，只有两头颜色不相同且长度不为0时才会发生渐变：

yellow 0%。不会发生渐变，只有一个颜色
yellow 0%,white 0%。不会发生渐变，长度为0
yellow 10% ,red 10% ,blue 80%。在10%到80%之间发生红色到蓝色的渐变。左边为纯黄色，右边为纯蓝色.

径向渐变

径向渐变也有几个重要概念：

曲线类型，有圆形和椭圆形两种（circle,ellipse）
边缘曲线（ending shape）。
虚拟渐变射线(virtual gradient ray)
颜色位置点

它跟线性渐变不同的是，它的size不是预先设定了，它跟容纳渐变的盒子大小息息相关。

径向渐变.png

径向渐变的语法为：

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
)
<ending-shape> = ['circle'|'ellipse']
<size> = ['closest-side'|'farthest-side'|'closest-corner'|'farthest-corner'|<length>|<length-percentage>{2}]
/* 
<length>表示圆形的半径、<length-percentage>{2}表示椭圆形的水平、垂直半径
 */
复制代码

其中的size的四个关键字：

closest-side，使边缘形状刚好与离渐变中心最近的边相遇的尺寸
farthest-side，使边缘形状刚好与离渐变中心最远的边相遇的尺寸
closest-corner，使边缘形状刚好与离渐变中心最近的角相遇的尺寸
farthest-corner，使边缘形状刚好与离渐变中心最远的角相遇的尺寸

需要说明的是，相同的关键字在不同的渐变位置<position>也会产生不同的渐变效果（位置不同，跟边角的距离也就不同咯）。

对于圆形，我们只需要计算到一个边或角的距离即可，将该距离视为半径即可。

而对于椭圆形，则需要考虑两个值：水平半径和垂直半径，对于*-side比较好理解，水平和垂直距离就是椭圆的水平和垂直半径。对于*-corner，则会保持与*-side相同的纵横比：
比如设置了closest-corner,则在保持closest-side的前提下，使边缘形状刚好与离渐变中心最近的角相遇。

案例

这一节，展示几个应用css渐变的例子。

adidas多彩logo

<div class="gradient"></div>
<style>
.gradient{
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg,transparent 50%, white 50%),linear-gradient(135deg, white 50%,rgba(0, 0, 0, 0.774) 62%,white 62%,white 69%,rgba(255, 166, 0) 69%,rgba(182, 25, 51) 81%,#fff 81%,#fff 88%,rgb(89, 176, 247) 88%,rgb(170, 12, 190) 100%);
}
</style>
复制代码

地图轮廓

<div class="gradient"></div>
<style>
.gradient{
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at 100% 50%,rgba(51, 51, 51, 0.747),#eee 75%,#333 75%);
}
</style>
复制代码

棒棒糖（六彩圆形）

<div class="container">
    <div class="top">
        <div class="sugar"></div>
    </div>
    <div class="bottom">
        <div class="sugar"></div>
    </div>
</div>
<style>
.top{
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    overflow: hidden;
}
.top > .sugar{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: 
    linear-gradient(-1600deg,transparent 50%,blue 50%,blue 100%),
    linear-gradient(-120deg,transparent 50%,cyan 50%,cyan 100%),
    linear-gradient(-90deg,transparent 50%,green 50%,green 100%),
    linear-gradient(-60deg,transparent 50%,yellow 50%,yellow 100%),
    linear-gradient(-30deg,transparent 50%,orange 50%,orange 100%),
    linear-gradient(-180deg,red 0%,red 100%);
}
.bottom{
    width: 200px;
    height: 100px;
    overflow: hidden;
    transform: rotate(180deg);
}
.bottom > .sugar{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: 
    linear-gradient(-1600deg,transparent 50%,blue 50%,blue 100%),
    linear-gradient(-120deg,transparent 50%,cyan 50%,cyan 100%),
    linear-gradient(-90deg,transparent 50%,green 50%,green 100%),
    linear-gradient(-60deg,transparent 50%,yellow 50%,yellow 100%),
    linear-gradient(-30deg,transparent 50%,orange 50%,orange 100%),
    linear-gradient(-180deg,red 0%,red 100%);
}
</style>
复制代码