console
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Gradient</title>
</head>
<body>
<div class="container">
<header>CSS3 渐变实现斜线背景<p>只写了webkit语法，请用chrome浏览</p></header>
<div class="gradient1">
</div>
<div class="gradient3"></div>
<div class="gradient4"></div>
<div class="gradient5"></div>
<div class="gradient2"></div>
<div class="gradient6"></div>
<div class="gradient7">
</div>
<div class="gradient8"></div>
</div>
</body>
</html>
body{
background-color: #eee;
}
.container{
width: 100%;
margin: 0 auto;
}
.container header{
text-align: center;
font-size: 30px;
padding: 20px 0;
color: #e50;
text-shadow: 0 2px white;
}
.container header p{
font-size: 12px;
color: #999;
text-shadow:none;
}
.container div{
width: 100px;
height: 80px;
margin: 10px;
float: left;
}
.gradient1{
background-image: -webkit-gradient(linear,
0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent),
to(transparent));
background-color: #ace;
background-size: 10px 10px;
}
.gradient2{
background-image: -webkit-gradient(linear,
0 100%, 100% 0,
color-stop(.25, #91c32e),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, #91c32e),
color-stop(.75, #91c32e),
color-stop(.75, transparent),
to(transparent));
background-size: 4px 4px;
background-color: #79b023;
}
.gradient3{
background-image: -webkit-gradient(
linear,
left top,right top,
color-stop(0.5,rgba(255,255,255,.2)),
color-stop(0.5,transparent),
to(transparent)
);
background-color: #ace;
background-size: 10px 100%;
}
.gradient4{
background-image: -webkit-gradient(
linear,
0 0,100% 100%,
color-stop(.5, rgba(255,255,255,.2)),
color-stop(.5, transparent),
to(transparent)
);
background-color: #ace;
background-size: 20px 20px;
}
.gradient5{
background-image:-webkit-gradient(
linear, 0 0, 100% 100%,
color-stop(.25, rgba(255,255,255,.2)),
color-stop(.25, transparent),
color-stop(.75, transparent),
color-stop(.75, rgba(255,255,255,.2))),
-webkit-gradient(
linear, 0 100%, 100% 0,
color-stop(.25, rgba(255,255,255,.2)),
color-stop(.25, transparent),
color-stop(.75, transparent),
color-stop(.75, rgba(255,255,255,.2)));
background-color: #ace;
background-size: 20px 20px;
}
.gradient6{
background-image: -webkit-gradient(
linear,
0 100%,100% 0,
color-stop(.25,#91c32e),
color-stop(.25,transparent),
color-stop(.75,transparent),
color-stop(.75,#91c32e)
),
-webkit-gradient(
linear,
0 100%,100% 0,
color-stop(.25,#91c32e),
color-stop(.25,transparent),
color-stop(.75,transparent),
color-stop(.75,#91c32e)
);
background-position: 0 0, 1px 1px;
background-color: #79b023;
background-size: 3px 3px;
}
.gradient7{
background-image: -webkit-gradient(
linear,
center top,center bottom,
color-stop(0.1,#91c32e),
color-stop(0.1,transparent),
to(transparent));
background-size: 100% 20px;
background-color: #79b023;
}
.gradient8{
background-image: -webkit-gradient(
linear,
0 0,0 100%,
color-stop(0.5,rgba(121, 176, 35, 0.5)),
color-stop(0.5,transparent),
to(transparent)
),
-webkit-gradient(
linear,
0 0,100% 0,
color-stop(0.5,rgba(121, 176, 35, 0.5)),
color-stop(0.5,transparent),
to(transparent)
);
background-color: #fff;
background-size: 20px 20px;
}