css怎么制作颜色渐变效果

时间：2015-09-20 12:11:46 　来源：免费模板网　作者：风雪　阅读次数　tagscss

纯色的背景和渐变的背景，一般访问者觉得渐变的效果更加美观一些，那么怎么用css设置渐变效果呢，实现方式有多样，常见的有制作一个渐变的图片，然后用背景图平铺的方式实现，或者用css其它属性。方法如下

代码如下
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=''lightblue'', endColorStr=''#FFFFFF'', gradientType=''1'');

实例

代码如下

<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>
BODY {
FONT-SIZE: 14px;
MARGIN-LEFT: 60px
}

DIV {
height:25;
padding:3;
BORDER-RIGHT: lightblue 1px solid;
BORDER-TOP: lightblue 1px solid;
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=''lightblue'', endColorStr=''#FFFFFF'', gradientType=''1'');
BORDER-LEFT: lightblue 1px solid;
WIDTH: 200px;
BORDER-BOTTOM: lightblue 1px solid
}

SPAN {
height:25;padding:3;
BORDER-RIGHT: lightblue 1px solid;
BORDER-TOP: lightblue 1px solid;
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=''lightblue'', endColorStr=''#FFFFFF'', gradientType=''0'');
MARGIN-LEFT: -25px;
BORDER-LEFT: lightblue 1px solid;
WIDTH: 225px;
BORDER-BOTTOM: lightblue 1px solid
}
</STYLE>