csslinear-gradient的简单介绍
如何CSS实现网页背景三种颜色渐变效果？
页面背景颜色渐变可以分为四个部分
一、从上往下渐变：
body{
FILTER:?progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变：
body{
FILTER:?Alpha(?style=1,opacity=25,finishOpacity=100,
startX=50,finishX=?100,startY=50,finishY=100);
background-color:?skyblue;
}
三、从左往右渐变：
body{
FILTER:?progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、从上往下渐变：
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
下面是整合的完整格式：
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""
html?xmlns=""
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/
title背景渐变/title
style?type="text/css"
!--
body?{
margin-left:?0px;
margin-top:?0px;
margin-right:?0px;
margin-bottom:?0px;
}
--
/style/head
body
table?width="100%"?height="100%"?border="0"?cellpadding="0"?cellspacing="0"
tr
td?height="600"?style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"nbsp;/td
/tr
/table
/body
/html
如果是在同一个页面里面显示多重渐变效果，可以定义每个渐变的width和height。
css color之线性linear-gradient()函数
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型，是一种特别的image数据类型。
linear-gradient( [ angle | to side-or-corner ,]? color-stop-list )
? \---------------------------------/ \----------------------------/
? ? Definition of the gradient line? ? ? ? List of color stops?
where side-or-corner = [ left | right ] || [ top | bottom ]
? and color-stop-list = [ linear-color-stop [, color-hint? ]? ]#, linear-color-stop
? and linear-color-stop = color [ color-stop-length ]?
? and color-stop-length = [ percentage | length ]{1,2}
? and color-hint = [ percentage
栗子：
div {
? background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
css3 linear-gradient线性渐变如何使用才有效果?求源码
linear-gradient这个CSS3的线性渐变属性，目前浏览器还没同一，需要加前缀，例如：
!doctype?html
html?lang="en"
head
meta?charset="UTF-8"
titleDocument/title
/head
style
#div1{
????width:?200px;
????height:?100px;
????background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
????background:-webkit-gradient(linear,0?50%,100%?50%,from(#ace),to(#f96));/*Old?gradient?for?webkit*/
????background:-webkit-linear-gradient(left,#ace,#f96);/*new?gradient?for?Webkit*/
????background:-o-linear-gradient(left,#ace,#f96);?/*Opera11*/
}
/style
body
div?id="div1"/div
/body
/html
你测试一下，基本上除了比较老的IE以外，都能显示了。
CSS如何使用渐变背景（linear-gradient）实现下划线？
background: linear-gradient(to right,#60B1F3 0,#60B1F3 16%, #DCDCDC 0,#DCDCDC 100%)
我现在才学到这里，不过我查了下资料自己会弄了。第二个色块从0到开始到自己的终止百分比就不会产生渐变了。
例：background: linear-gradient(to right,色块1 0,色块1 16%, 色块2 0,色块2 100%)
CSS3里面的线性渐变：linear-gradient参数是什么样子的？
1、语法
2、参数
第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：
第一个参数省略时，默认为“180deg”，等同于“to?bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
例如：
background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);
该属性已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
css3中的gradient详细用法
语法：
-moz-linear-gradient( [point || angle,]? stop, stop [, stop]* )
参数：其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
HTML：
div class="example example1"/div
CSS：
.example {
width: 150px;
height: 80px;
}
现在给这个div应用一个简单的渐变样式：
.example1 {
background: -moz-linear-gradient( top,#ccc,#000);
}
