css3的gradient分為兩種：線性漸變（linear）和徑向漸變（radial）。
一、線性漸變linear-gradient
1、介紹
linear-gradient([設定方向]，[設定開始顏色]，[設定多種過度顏色]，[設定結束顏色])
引數：
第一個引數：指定漸變方向，可以用“角度”的關鍵字或“英文”來表示：
第一個引數預設：180deg，等同於“to bottom”。
後面的顏色至少有2個，即開始顏色和結束顏色。
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
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS製作立體導航</title> <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css"> <style> body{ background: #ebebeb; } .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; /*製作圓*/ border-radius:10px; /*製作導航立體風格*/ box-shadow:0 5px rgb(176,72,63); } .nav a{ display: inline-block; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .nav a:hover{ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); } .nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); list-style: none outside none; /*製作導航分隔線*/ background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px; } /*使用偽元素製作導航列表項分隔線*/ /*刪除第一項和最後一項導航分隔線*/ .nav li:last-child{ background: none; } .nav a, .nav a:hover{ color:#fff; text-decoration: none; } </style> </head> <body> <ul class="nav"> <li> <a href="">Home</a> </li> <li> <a href="">About Me</a> </li> <li> <a href="">Portfolio</a> </li> <li> <a href="">Blog</a> </li> <li> <a href="">Resources</a> </li> <li> <a href="">Contact Me</a> </li> </ul> </body> </html>
效果：
c、谷歌搜尋低調的線性漸變背景
檢視了一個google搜尋的程式碼，寫了個例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>starof test demo</title> <style type="text/css"> input[type="submit"]{ height: 29px; line-height: 27px; } input[type="submit"]{ background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1)); background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1); background-image: linear-gradient(top,#f5f5f5,#f1f1f1); background-color: #f5f5f5; border: 1px solid #dcdcdc; border: 1px solid rgba(0,0,0,0.1); -webkit-border-radius: 2px; border-radius: 2px; color: #444; /*以上*/ -webkit-user-select: none; cursor: default; font-family: arial,sans-serif; font-size: 11px; font-weight: bold; margin: 11px 8px; min-width: 54px; padding: 0 8px; text-align: center; } input[type="submit"]:hover{ background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); background-image: linear-gradient(top,#f8f8f8,#f1f1f1); background-color: #f8f8f8; border: 1px solid #c6c6c6; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 1px 1px rgba(0,0,0,0.1); color: #222; } </style> </head> <body> <input value="Google 搜尋" name="btnK" type="submit"/> <input value=" 手氣不錯 " name="btnI" type="submit"> </body> </html>
二、徑向漸變radial-gradient
待續
大漠寫的css3 gradient
http://www.w3cplus.com/content/css3-gradient