线性渐变效果一.png
线性渐变效果二.png
线性渐变效果三.png
线性渐变效果四.png
线性渐变效果五.png
线性渐变效果六.png
线性渐变效果七.png
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{margin:0;padding:0;}
.box{
margin:20px auto;
width:300px;height:400px;
background:-webkit-linear-gradient(
red 4%,
green 25%,
yellow 50%,
#000 75%,
#f08f67 100%) ;
box-shadow:3px 3px 4px 2px #333;
}
.box1{
margin:20px auto;
width:400px;height:400px;
background:-webkit-linear-gradient(left top,red,green);
background:-moz-linear-gradient(left top,red,green);
background:-o-linear-gradient(left top,red,green);
background:linear-gradient(left top,red,green);
/*从左上角的过渡到右下角*/
}
.box2{
margin:20px auto;
width:400px;height:400px;
background:-webkit-linear-gradient(right,red,green);
background:-moz-linear-gradient(left,red,green);
background:-o-linear-gradient(left,red,green);
background:linear-gradient(left,red,green);
}
.box3{
margin:20px auto;
width:400px;height:400px;
background:-webkit-linear-gradient(top,red,green);
background:-moz-linear-gradient(top,red,green);
background:-o-linear-gradient(top,red,green);
background:linear-gradient(top,red,green);
}
.box4{
margin:20px auto;
width:400px;height:400px;
border:1px #000 solid;
background:-webkit-linear-gradient(
230deg,red,green) ;
}
.box5{
margin:20px auto;
width:400px;height:400px;
background:-webkit-linear-gradient(left,red 30%,#fff 70%, yellow 100%);
}
.box6{
margin:20px auto;
width:400px;height:400px;
background:-webkit-linear-gradient(left bottom,red 30%,#fff 70%, yellow 100%);
}
.box7{
margin:20px auto;
width:400px;height:400px;
background:-webkit-gradient(linear,0 0,0 100%,,#000 0,from(red),to(yellow));
}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
</body>
<script src=""> </script>
<script type="text/javascript">
<!--
//-->
</script>
</html>
