1.webkit漸變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding:0px;
margin:0 auto;
}
div{
width:100%;
height:40px;
padding:4px;
background:-webkit-gradient(linear,left top,right bottom,from(blue),to(red));
/*-webkit-background-origin: padding-box;*/
/*-webkit-background-clip: content-box;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width:400px;
height:200px;
padding:4px;
background:-webkit-gradient(radial,200 100,100,200 100,100,from(orange),to(white),color-stop(90%,white));
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:400px;
height:200px;
border:solid 2px #fcf;
padding:4px;
background:
-webkit-gradient(radial,60 45,10,52 50,60,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62)),
-webkit-gradient(radial,105 105,20,112 120,80,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62)),
-webkit-gradient(radial,95 15,15,102 20,60,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62)),
-webkit-gradient(radial,300 100,30,300 100,100,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62));
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.Gecko漸變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:400px;
height:200px;
border:solid 2px #fcf;
padding:4px;
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,blue,indigo,violet);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:500px;
height:400px;
margin:0 auto;
padding:4px;
background:-moz-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1)),url(demo.jpg) no-repeat center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:400px;
height:400px;
border:solid 2px #fcf;
padding:4px;
background:-moz-radial-gradient(red,white,orange);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
