CSS3 渐变（Gradients）

参考:

http://www.runoob.com/css3/css3-gradients.html

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

语法

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

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#grad1 {

    height: 200px;

    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<h3>线性渐变 - 从上到下</h3>

<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

</html>

aaarticlea/png;base64,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" alt="" />

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad {

  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

  background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

aaarticlea/png;base64,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8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAc84AEPeMADHvCABzzgAQ94wAMe8IAHPOABD3jAAx7wgAe8/2fwzMzM/kEDnpmZrRIDnpmZrRIDnpmZrRIDnpmZrRIDnpmZrRIDnpmZrRIDnpmZrRL7Fwjad4NU7TaqAAAAAElFTkSuQmCC" alt="" />

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad {

  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */

  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

}

aaarticlea/png;base64,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" alt="" />

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

#grad {

  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */

  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/

  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/

  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

}

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlYAAADjCAIAAADIX82nAAAOPUlEQVR4nO3V9xcX8gLG8ZQRGcnOyCojm0qRUELIXiF7pxJJyKZUZimUyt57h4yMIiOVMlIUISMrFD33h+/n3HvuOd+f7rn3uvf0es77D3h+e9WImZnZQrkaf/UBMzOzv2YINDOzhXQINDOzhXT/EoELFmTBgvz5Z+mPP/LHH5k/P/PnZ968zJuX338v/fZbfvstv/6aX3/N3LmZOze//FL6+ef8/HN++ik//ZQff8yPP+aHH0pz5mTOnHz/fb7/Pt99l+++y7fflr75Jt98k9mzM3t2vv46X3+dr74qffllvvwys2Zl1qx88UW++CKff16aOTMzZ2bGjMyYkc8+K336aT79NNOnZ/r0TJuWadPyySelqVMzdWo+/jgff5yPPspHH+XDD0sffJAPPsiUKZkyJZMnZ/LkvP9+adKkTJqUiRMzcWImTMiECXnvvdL48Rk/Pu++m3ffzTvv5J138vbbpbfeyltvZdy4jBuXN9/Mm2/mjTdKY8dm7NiMGZMxY/L663n99bz2WunVV/Pqq3nllbzySkaPzujRefnl0ksv5aWX8uKLefHFvPBCadSojBqV55/P88/nuedKzz6bZ5/NyJEZOTLPPFN6+uk8/XSeeipPPZUnn8yTT+aJJ0qPP57HH89jj+Wxx/Loo3n00TzySOnhh/Pww3nooTz0UB58MA8+mAceKN1/f+6/P/fdl/vuy7335t57c889pbvvzt135667ctddufPO3Hln7rijdPvtuf323HZbbrstt96aW2/NLbeURozIiBEZPjzDh2fYsAwblptvLg0dmqFDM2RIhgzJTTflppty442lG27IDTdk8OAMHpxBgzJoUK6/vjRwYAYOzIABGTAg112X667LtdeWrrkm11yTq6/O1Vfnqqty1VW58spS//7p3z/9+qVfv/Ttm759c8UVpT590qdPevdO7965/PJcfnkuu6x06aW59NJcckkuuSQXX5yLL85FF5UuvPAfXXBBLrgg55+f889Pr17p1SvnnVc699yce27OOSfnnJOePdOzZ84+u9SjR3r0yFln5ayz0r17unfPmWeWzjgjZ5yRbt3SrVtOP73UtWu6dk2XLunSJZ07p3PnnHZaqVOndOqUU0/NqafmlFNyyik5+eTSSSflpJNy4ok58cSccEJOOCHHH1867rgcd1yOPTbHHptjjskxx+Too0tHHZWjjsqRR+bII9OxYzp2zBFHlA4/PIcfnsMOy2GHpUOHdOiQQw8tHXJIDjkkBx+cgw/OQQfloINy4IGlAw7IAQdk//2z//7Zb7/st1/23be0zz7ZZ5/svXf23jvt26d9++y1V2nPPbPnntljj+yxR9q1S7t22X330m67Zbfdsuuu2XXXtG2btm2zyy6lNm3Spk1at07r1tl55+y8c3baqbTjjqVWrdKqVXbYITvskJYt07Jltt++tN122W67tGiRFi3SvHmaN8+225aaNUuzZmnaNE2bpkmTNGmSbbYpbb11tt46W22VrbbKlltmyy2zxRalzTfP5ptns82y2WbZdNNsumk22aTUuHEaN87GG2fjjbPRRtloo2y4YWmDDbLBBmnUKI0apWHDNGyY9dcvrbde1lsv666bddfNOutknXWy9tqlBg3SoEHWWitrrZU118yaa2aNNUqrr57VV0/9+qlfP6utltVWy6qrllZZJauskpVXzsorZ6WVstJKWXHF0gorZIUVUq9e6tXL8suX6tZN3bpZbrkst1yWXTbLLptlliktvXSWXjp16qROnSy1VJZaKksuWapdO7VrZ4klssQSWXzxLL54FlustOiiWXTR1KqVWrVSs2Zq1swii2SRRRA445/8q0pgxb+qBFb8q0pgxb+qBFb8q0pgxb+qBFb8+y8TWPGvKoEV/6oSWPGvKoEV/6oSWPGvKoEV/6oSWPGvKoEV/6oSWPGvKoEV/6oSWPGvKoEV/6oSWPGvKoEV/6oS+G/H7+/+we8/il9Fvqr4VeSril9Fvqr4VeSril9Fvqr4VeSril9Fvv9N/CryVcWvIl9V/CryVcWvIl9V/GrUSI0q3iEQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhGIQAQiEIEIRCACEYhABCIQgQhEIAIRiEAEIhCBCEQgAhG40BNoZmb2/z8EmpnZQjoEmpnZQjoEmpnZQjoEmpnZQrq/AYPxwzjls+vXAAAAAElFTkSuQmCC" alt="" />