CSS3颜色渐变练习
2016-12-21 21:01
225 查看
今天学习了一下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); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
/*从左到右的线性渐变：*/
li:nth-child(2) {
background: -webkit-linear-gradient(left, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red, blue); /* 标准的语法 */
}
/*从左上角到右下角的线性渐变*/
li:nth-child(3) {
background: -webkit-linear-gradient(left top, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red, blue); /* 标准的语法 */
}
/*带有指定的角度的线性渐变*/
li:nth-child(4) {
background: -webkit-linear-gradient(70deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(70deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(70deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(70deg, red, blue); /* 标准的语法 */
}
/*带有多个颜色结点的从上到下的线性渐变*/
li:nth-child(5) {
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */
}
/*带有彩虹颜色和文本的线性渐变*/
li:nth-child(6) {
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
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)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
/*重复的线性渐变：repeating-linear-gradient*/
li:nth-child(8) {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
/*颜色结点均匀分布的径向渐变：radial-gradient*/
li:nth-child(9) {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
/*颜色结点不均匀分布的径向渐变：radial-gradient*/
li:nth-child(10) {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
/*形状为圆形的径向渐变：shape 参数定义了形状。它可以是值 circle 或 ellipse--circle 表示圆形，ellipse 表示椭圆形--*/
li:nth-child(11) {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
/*形状为椭圆形径向渐变,ellipse 表示椭圆形--*/
li:nth-child(12) {
background: -webkit-radial-gradient(ellipse, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(ellipse, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(ellipse, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(ellipse, red, yellow, green); /* 标准的语法 */
}
/*带有不同尺寸大小关键字的径向渐变：size 参数定义了渐变的大小：closest-side，farthest-side，closest-corner，farthest-corner--*/
li:nth-child(13) {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
}
/*带有不同尺寸大小关键字的径向渐变：size 参数定义了渐变的大小：closest-side，farthest-side，closest-corner，farthest-corner--*/
li:nth-child(14) {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
}
/*带有不同尺寸大小关键字的径向渐变：size 参数定义了渐变的大小：closest-side，farthest-side，closest-corner，farthest-corner--*/
li:nth-child(15) {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
/* Firefox 3.6 - 15 */
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) {
/* 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%);
}
</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>
截图：
代码：
<!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); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
/*从左到右的线性渐变：*/
li:nth-child(2) {
background: -webkit-linear-gradient(left, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red, blue); /* 标准的语法 */
}
/*从左上角到右下角的线性渐变*/
li:nth-child(3) {
background: -webkit-linear-gradient(left top, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red, blue); /* 标准的语法 */
}
/*带有指定的角度的线性渐变*/
li:nth-child(4) {
background: -webkit-linear-gradient(70deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(70deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(70deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(70deg, red, blue); /* 标准的语法 */
}
/*带有多个颜色结点的从上到下的线性渐变*/
li:nth-child(5) {
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */
}
/*带有彩虹颜色和文本的线性渐变*/
li:nth-child(6) {
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
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)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
/*重复的线性渐变：repeating-linear-gradient*/
li:nth-child(8) {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
/*颜色结点均匀分布的径向渐变：radial-gradient*/
li:nth-child(9) {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
/*颜色结点不均匀分布的径向渐变：radial-gradient*/
li:nth-child(10) {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
/*形状为圆形的径向渐变：shape 参数定义了形状。它可以是值 circle 或 ellipse--circle 表示圆形，ellipse 表示椭圆形--*/
li:nth-child(11) {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
/*形状为椭圆形径向渐变,ellipse 表示椭圆形--*/
li:nth-child(12) {
background: -webkit-radial-gradient(ellipse, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(ellipse, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(ellipse, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(ellipse, red, yellow, green); /* 标准的语法 */
}
/*带有不同尺寸大小关键字的径向渐变：size 参数定义了渐变的大小：closest-side，farthest-side，closest-corner，farthest-corner--*/
li:nth-child(13) {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
}
/*带有不同尺寸大小关键字的径向渐变：size 参数定义了渐变的大小：closest-side，farthest-side，closest-corner，farthest-corner--*/
li:nth-child(14) {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side, blue, green, yellow, black);
}
/*带有不同尺寸大小关键字的径向渐变：size 参数定义了渐变的大小：closest-side，farthest-side，closest-corner，farthest-corner--*/
li:nth-child(15) {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 50%, closest-corner, blue, green, yellow, black);
/* Firefox 3.6 - 15 */
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) {
/* 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%);
}
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐