css3 Gradient背景

css3的gradient分为两种：线性渐变（linear）和径向渐变（radial）。

1、线性渐变linear-gradient

一、介绍

linear-gradient([设置方向]，[设置开始颜色]，[设置多种过分颜色]，[设置结束颜色])

参数：

第一个参数：指定渐变方向，能够用“角度”的关键字或“英文”来表示：

第一个参数默认：180deg，等同于“to bottom”。

后面的颜色至少有2个，即开始颜色和结束颜色。

二、使用

a、举例：

<style type="text/css">
p{
    width: 300px;
    height: 100px;
    background-image:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
<p>从左到右线性渐变背景</p>

b、一个很是酷的功能：用渐变制做导航分割线

background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px; 意思背景使用渐变色，而后不重复，居右，斜线后面的实际上是background-size的设置，width 1px，height 15px

 View Code

效果：

c、谷歌搜索低调的线性渐变背景

查看了一个google搜索的代码，写了个例子

 View Code

 

 

 

 

2、径向渐变radial-gradient

待续

 

 

 

大漠写的css3 gradient

http://www.w3cplus.com/content/css3-gradient