CSS3即将引入为一个盒子指定背景渐变的功能。渐变通过background-image属性来创建。
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> #gradient { /* fallback color */ ackground-color: #66cccc; /* fallback image */ background-image: url("images/fallback-image.png"); /* Firefox 3.6+ */ background-image: -moz-linear-gradient(#336666, #66cccc); /* Safari 4+, Chrome 1+ */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to(#336666)); /* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(#336666, #66cccc); /* Opera 11.10+ */ background-image: -o-linear-gradient(#336666, #66cccc); height: 150px; 300px;} </style> </head> <body> <div id="gradient"></div> </body> </html>