gradient(渐变)

生成渐变颜色的背景图片

CSS3渐变分为linear-gradient(线性渐变)和radial-gradient(径向渐变)

linear-gradient(线性渐变)

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴

用法

background-image:　linear-gradient（方向，　颜色，　颜色，．．）

第一个参数为渐变的方向，　取值为角度（如45deg）或方向关键字(top, bottom等)
- 0deg == top 顺时针
- 注意: 几个浏览器实现前缀，在旧稿的规格中 0deg 是指右部而不是顶部。当是混合前缀和标准线性渐变时要特别注意角度的值。一个简单的公式：90 - x = y，x 是标准用法，而 y是非标准，浏览器引擎前缀用法。
第二个参数开始是一个颜色列表, 表示起始点到结束点之间渐变颜色;每个颜色可以加入百分比表示颜色开始位置

background-image: linear-gradient(to top, blue, red); /*方向值为方向关键字*/
background-image: linear-gradient(45deg, blue, red); /*方向值为角度值*/
background-image: linear-gradient( 0deg, blue, green 40%, red );/*多个颜色, 颜色加入百分比*/

一个按钮

.btn{
    margin: 10px;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 20px;
    background: #D38312; /*渐进增强*/
    background: linear-gradient(45deg, #D38312 10%,#A83279 90%);
     
}

10.png

条纹

div{
  height: 100px;
  width: 200px;
  border: 1px solid #111;
  background: #111;
  background-image: linear-gradient(to right, #fff, #fff 5%, #111 5%, #111 10%, #fff 10%, #fff 15%, #111 15%, #111 20%, #fff 20%, #fff 25%, black);
}

11.png

radial-gradient(径向渐变)

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。

用法

radial-gradient: （形状 大小  at 位置, 颜色, 颜色,...）;

形状: 定义渐变的形状,可选参数, 取值为circle(圆)或ellipse(椭圆),如果不设置则根据元素的形状来确定
大小:　定义渐变的大小，可选值，默认为径向渐变的半径长度为从圆心到离圆心最远的边
- 如果渐变形状为圆形，　取值为长度值（如，50px, 10em），此值不不能负值。
- 如果渐变形状为椭圆，　取值为两个值，　第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用长度值<length>定义大小之外还可以使用<percentage>来定义这两半径大小。使用<percentage>定义值是相对于径向渐变容器的尺寸。同样不能为负值。
- 也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
  注意firefox目前只支持关键字

位置：　定义径向渐变的圆心位置，用于确定元素渐变的中心位置。可选参数，　默认为元素中心，也是用两个值表示，第一个代表横坐标，　第二个代表纵坐标，取值可以是长度值<length>，百分比<percentage>，或方向关键字（top, bottom, right, left）. 注意加上at关键字
颜色列表：用法和线性渐变一样

div{
  height: 100px;
  width: 200px;
  border: 1px solid #111;
}

background-image:  radial-gradient(red, blue);
background-image:  radial-gradient(circle, red, blue);/* 指定形状为圆 */
background-image:  radial-gradient(circle 50px, red, blue);/* 指定圆的大小 */
background-image:  radial-gradient(50px 25px, red, blue);/* 指定椭圆的大小 */
background-image:  radial-gradient(25% 25%, red, blue);/* 用百分比指定椭圆的大小 */
background-image:  radial-gradient(circle 50px at center top, red, blue);/* 指定圆心的位置 */
background-image:  radial-gradient(circle 50px at 50% 0% , red, blue);/*用百分比 指定圆心的位置 */
background-image:  radial-gradient(circle 50px at  100px 0px , red, blue);/*用长度值 指定圆心的位置 */

工具

Ultimate CSS Gradient Generator

综合示例

<p data-height="1074" data-theme-id="dark" data-slug-hash="BKObvE" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/lulupy/pen/BKObvE/">BKObvE</a> by lulu (<a href="http://codepen.io/lulupy">@lulupy</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>