css3 Gradients 线性渐变-CSDN博客

代码块

html页面:

<!DOCTYPE html>

<html>

<head>

<title>css3 Gradients</title>

</head>

<body>

<div class="grad-repeating-lg">重复的线性渐变</div>

<div class="grad-rgba-0-1">从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色</div>

<div class="grad-r-o-y-g-b-i-v">带有彩虹颜色和文本的线性渐变</div>

<div class="grad-red-green-blue">带有多个颜色结点的从上到下的线性渐变</div>

<div class="grad-45-deg">45角度的线性渐变</div>

<div class="grad-0-deg">0角度的线性渐变</div>

<div class="grad-90-deg">90角度的线性渐变</div>

<div class="grad-180-deg">180角度的线性渐变</div>

<div class="grad-FF69B4-2F4F4F">从右上角开始（到左下角）的线性渐变</div>

<div class="grad-008B8B-DEB887">从左上角开始（到右下角）的线性渐变</div>

<div class="grad-A52A2A-6495ED">从左边开始的线性渐变。起点是#A52A2A，慢慢过渡到#6495ED</div>

<div class="grad-red-blue">从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色</div>

</body>

</html>

css样式:

div{

width: 800px;

height: 600px;

padding: 20px;

margin:50px;

}

.grad-red-blue{

background:-webkit-linear-gradient(red,blue);

background:-o-linear-gradient(red,blue);

background:-moz-linear-gradient(red,blue);

background:linear-gradient(red,blue);

}

.grad-A52A2A-6495ED{

background:-webkit-linear-gradient(left,#A52A2A,#6495ED);

background:-o-linear-gradient(right,#A52A2A,#6495ED);

background:-moz-linear-gradient(right,#A52A2A,#6495ED);

background:linear-gradient(to right,#A52A2A,#6495ED);

}

.grad-008B8B-DEB887{

background:-webkit-linear-gradient(left top,#008B8B,#DEB887);

background:-o-linear-gradient(bottom right,#008B8B,#DEB887);

background:-moz-linear-gradient(bottom right,#008B8B,#DEB887);

background:linear-gradient(to bottom right,#008B8B,#DEB887);

}

.grad-FF69B4-2F4F4F{

background:-webkit-linear-gradient(right top,#FF69B4,#2F4F4F);

background:-o-linear-gradient(bottom left ,#FF69B4,#2F4F4F);

background:-moz-linear-gradient(bottom left,#FF69B4,#2F4F4F);

background:linear-gradient(to bottom left,#FF69B4,#2F4F4F);

}

.grad-180-deg{

background:-webkit-linear-gradient(180deg,#0ff,#B8860B);

background:-o-linear-gradient(180deg,#0ff,#B8860B);

background:-moz-linear-gradient(180deg,#0ff,#B8860B);

background:linear-gradient(180deg,#0ff,#B8860B);

}

.grad-90-deg{

background:-webkit-linear-gradient(90deg,#F0F8FF,#B8860B);

background:-o-linear-gradient(90deg,#F0F8FF,#B8860B);

background:-moz-linear-gradient(90deg,#F0F8FF,#B8860B);

background:linear-gradient(90deg,#F0F8FF,#B8860B);

}

.grad-0-deg{

background:-webkit-linear-gradient(0deg,#F0F8FF,#7FFFD4);

background:-o-linear-gradient(0deg,#F0F8FF,#7FFFD4);

background:-moz-linear-gradient(0deg,#F0F8FF,#7FFFD4);

background:linear-gradient(0deg,#F0F8FF,#7FFFD4);

}

.grad-45-deg{

background:-webkit-linear-gradient(30deg,red,blue);

background:-o-linear-gradient(30deg,red,blue);

background:-moz-linear-gradient(30deg,red,blue);

background:linear-gradient(30deg,red,blue);

}

.grad-red-green-blue{

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);

}

.grad-r-o-y-g-b-i-v{

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);

}

.grad-rgba-0-1{

background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));

background:-o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));

background:-moz-linear-gradient(left,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));

}

.grad-repeating-lg{

/* 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%);

}

</style>

本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1883422