css3渐变.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3渐变</title>
<style>
.stage1{
background:linear-gradient(65deg,red,rgba(85, 128, 214, 0.2) 60%, rgba(128, 77, 10, 0.8));
width: 200px;
height: 200px;
}
.stage2{
height: 200px;
width: 200px;
background: -webkit-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */
background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(90deg,yellow,rgb(122, 122, 185,.2) 50%,green 10%); /* 标准语法 (必须在最后) */
}
.stage3{
height: 200px;
width: 200px;
box-shadow: rgb(122, 122, 185) 1px 10px 12px;
background: repeating-linear-gradient(180deg,yellow,rgb(122, 122, 185,.4) 7%,green 30%); /* 标准语法 (必须在最后) */
}
.stage4{
height: 200px;
width: 200px;
opacity: 0.5;
background: repeating-linear-gradient(45deg,yellow,rgb(74, 74, 168,.2) 7%,green 10%); /* 标准语法 (必须在最后) */
}
.stage5{
height: 200px;
width: 200px;
border-radius: 50%;
background: radial-gradient(red 5%, rgba(133, 119, 150, 0.2) 15%,rgba(22,233,44,.5) 60%); /* 标准的语法 */
}
.stage6{
height: 200px;
width: 200px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
.stage7{
height: 200px;
width: 200px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
.stage8{
height: 200px;
width: 200px;
background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,rgb(226, 226, 191),black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
.stage9{
height: 200px;
width: 200px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
.stage10{
height: 200px;
width: 200px;
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
ol li{
float: left;
padding: 20px;
list-style: none;
}
</style>
</head>
<body>
<ol>
<li>线性渐变
<div class="stage1"></div>
</li>
<li>重复线性渐变1
<div class="stage2"></div>
</li>
<li>重复线性渐变2
<div class="stage3"></div>
</li>
<li>重复线性渐变3
<div class="stage4"></div>
</li>
<li>径向渐变1
<div class="stage5"></div>
</li>
<li>径向渐变2 farthest-side
<div class="stage6"></div>
</li>
<li>径向渐变3 closest-side
<div class="stage7"></div>
</li>
<li>径向渐变4 closest-corner
<div class="stage8"></div>
</li>
<li>径向渐变4 farthest-corner
<div class="stage9"></div>
</li>
<li>重复的径向渐变
<div class="stage10"></div>
</li>
</ol>
</body>
</html>
网友评论