今天学习了一下CSS3多种颜色渐变案例。
截图：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS3颜色渐变练习</title>
<style type="text/css">
#box ul {
list-style-type: none;
padding: 0px;
height: auto;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#box ul li {
margin: 20px;
padding: 0px;
float: left;
height: 150px;
width: 150px;
margin: 30px;
background-color: #999;
font-size: 16px;
}
li:first-child {
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
li:nth-child(2) {
background: -webkit-linear-gradient(left, red, blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red, blue);
}
li:nth-child(3) {
background: -webkit-linear-gradient(left top, red, blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red, blue);
}
li:nth-child(4) {
background: -webkit-linear-gradient(70deg, red, blue);
background: -o-linear-gradient(70deg, red, blue);
background: -moz-linear-gradient(70deg, red, blue);
background: linear-gradient(70deg, red, blue);
}
li:nth-child(5) {
background: -webkit-linear-gradient(red, green, blue);
background: -o-linear-gradient(red, green, blue);
background: -moz-linear-gradient(red, green, blue);
background: linear-gradient(red, green, blue);
}
li:nth-child(6) {
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
li:nth-child(7) {
background: -webkit-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
li:nth-child(8) {
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
li:nth-child(9) {
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
}
li:nth-child(10) {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
background: -o-radial-gradient(red 5%, green 15%, blue 60%);
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(red 5%, green 15%, blue 60%);
}
li:nth-child(11) {
background: -webkit-radial-gradient(circle, red, yellow, green);
background: -o-radial-gradient(circle, red, yellow, green);
background: -moz-radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle, red, yellow, green);
}
li:nth-child(12) {
background: -webkit-radial-gradient(ellipse, red, yellow, green);
background: -o-radial-gradient(ellipse, red, yellow, green);
background: -moz-radial-gradient(ellipse, red, yellow, green);
background: radial-gradient(ellipse, red, yellow, green);
}
li:nth-child(13) {
background: -webkit-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
background: -o-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
background: -moz-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
background: radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
}
li:nth-child(14) {
background: -webkit-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
background: -o-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
background: -moz-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
background: radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
}
li:nth-child(15) {
background: -webkit-radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
background: -o-radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
background: -moz-radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
background: radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
}
li:nth-child(16) {
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>从上到下的线性渐变</li>
<li>从左到右的线性渐变</li>
<li>从左上角到右下角的线性渐变</li>
<li>带有指定的角度的线性渐变</li>
<li>带有多个颜色结点的从上到下的线性渐变</li>
<li>带有彩虹颜色和文本的线性渐变</li>
<li>从左到右的线性渐变，带有透明度</li>
<li>重复的线性渐变</li>
<li>颜色结点均匀分布的径向渐变</li>
<li>颜色结点不均匀分布的径向渐变</li>
<li>形状为圆形的径向渐变</li>
<li>形状为椭圆形的径向渐变</li>
<li>带有不同尺寸大小关键字的径向渐变</li>
<li>带有不同尺寸大小关键字的径向渐变</li>
<li>带有不同尺寸大小关键字的径向渐变</li>
<li>重复的径向渐变</li>
</ul>
</div>
</body>
</html>