<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3渐变的效果</title>
<style>
div{
text-align: center;
width:230px;
height: 60px;
-webkit-border-radius:15px;
-moz-border-radius: 15px;
}
.box1{
代表的是谷歌的浏览器-webkit-gradient(linear,开始位置,结束位置,from(颜色),to(颜色))
Mozilla浏览器-moz-linear-gradient(开始位置,开始颜色,结束颜色);
background: -webkit-gradient(linear,left top,left bottom,from(#000),to(#999));
background: -moz-linear-gradient(top,red,blue);
}
.box2{
渐变效果是在css3当中的background或者background-image
实现更加复杂的功能
谷歌浏览器当中:color-stop:(位置,颜色),该功能是将划分的这段区域划分成0-1,开始为0,结束为1
火狐当中为:-moz-linear-gradient(开始位置,开始颜色,中间点颜色,百分比,结束颜色)
background: -webkit-gradient(linear,left top,left bottom,
color-stop(0.0,red),
color-stop(0.3,white),
color-stop(0.5,black),
color-stop(0.8,blue),
color-stop(1.0,green)
);
background: -moz-linear-gradient(top,red,#ffffff 50%,blue);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>