CSS3线性渐变--angle用角度设置渐变方向
2018-01-26 本文已影响0人
挥剑斩浮云
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3线性渐变--angle用角度设置渐变方向</title>
<style type="text/css" media="screen">
body{
font-family: "Microsoft YaHei";
font-size:16px;
}
div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 0px solid #2b6a9a;
margin: 20px;
float: left;
}
.deg0 {
background-image: -webkit-linear-gradient(0deg, red, green);
background-image: linear-gradient(0deg, red, green);
}
.deg45 {
background-image: -webkit-linear-gradient(45deg, red, green);
background-image: linear-gradient(45deg, red, green);
}
.deg90 {
background-image: -webkit-linear-gradient(90deg, red, green);
background-image: linear-gradient(90deg, red, green);
}
.deg135 {
background-image: -webkit-linear-gradient(135deg, red, green);
background-image: linear-gradient(135deg, red, green);
}
.deg180 {
background-image: -webkit-linear-gradient(180deg, red, green);
background-image: linear-gradient(180deg, red, green);
}
.deg225 {
background-image: -webkit-linear-gradient(225deg, red, green);
background-image: linear-gradient(225deg, red, green);
}
.deg270 {
background-image: -webkit-linear-gradient(270deg, red, green);
background-image: linear-gradient(270deg, red, green);
}
.deg315 {
background-image: -webkit-linear-gradient(315deg, red, green);
background-image: linear-gradient(315deg, red, green);
}
.deg360 {
background-image: -webkit-linear-gradient(360deg, red, green);
background-image: linear-gradient(360deg, red, green);
}
/*negative*/
.deg45-negative {
background-image: -webkit-linear-gradient(-45deg, red, green);
background-image: linear-gradient(-45deg, red, green);
}
.deg90-negative {
background-image: -webkit-linear-gradient(-90deg, red, green);
background-image: linear-gradient(-90deg, red, green);
}
.deg135-negative {
background-image: -webkit-linear-gradient(-135deg, red, green);
background-image: linear-gradient(-135deg, red, green);
}
.deg180-negative {
background-image: -webkit-linear-gradient(-180deg, red, green);
background-image: linear-gradient(-180deg, red, green);
}
.deg225-negative {
background-image: -webkit-linear-gradient(-225deg, red, green);
background-image: linear-gradient(-225deg, red, green);
}
.deg270-negative {
background-image: -webkit-linear-gradient(-270deg, red, green);
background-image: linear-gradient(-270deg, red, green);
}
.deg315-negative {
background-image: -webkit-linear-gradient(-315deg, red, green);
background-image: linear-gradient(-315deg, red, green);
}
.deg360-negative {
background-image: -webkit-linear-gradient(-360deg, red, green);
background-image: linear-gradient(-360deg, red, green);
}
</style>
</head>
<body>
<h1>CSS3线性渐变--angle用角度设置渐变方向(red,green)</h1>
<hr>
<div class="deg0">0deg</div>
<div class="deg45">45deg</div>
<div class="deg90">90deg</div>
<div class="deg135">135deg</div>
<div class="deg180">180deg</div>
<div class="deg225">225deg</div>
<div class="deg270">270deg</div>
<div class="deg315">315deg</div>
<div class="deg360">360deg</div>
<div class="deg0">0deg</div>
<div class="deg45-negative">-45deg</div>
<div class="deg90-negative">-90deg</div>
<div class="deg135-negative">-135deg</div>
<div class="deg180-negative">-180deg</div>
<div class="deg225-negative">-225deg</div>
<div class="deg270-negative">-270deg</div>
<div class="deg315-negative">-315deg</div>
<div class="deg360-negative">-360deg</div>
</body>
</html>
