<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css渐变效果</title>
</head>
<body>
<div style="FILTER:alpha(opacity=30 finishopacity=0 style=1) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); VERTICAL-ALIGN: middle; BORDER-LEFT: #f3f3f3 1px solid; WIDTH: 300px; PADDING-TOP: 4px; BORDER-BOTTOM: #f3f3f3 1px solid; HEIGHT: 100px" align="center"></div>
<!--
参数 说明
gradientType=1代表横向渐变，gradientType=0代表纵向淅变
渐变效果实现：filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF0000,endcolorstr=#FFCC66,gradientType=1)
startcolorstr="色彩"代表渐变开头的色彩
endcolorstr="色彩"代表渐变结尾的色彩
opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style 指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
具体效果应用如下：
CSS滤镜实现 代码 效果拷屏
正常图片
＜img src="pic1.jpg"
width="180" height="120"＞
透明度为60
＜img src="pic1.jpg"
style="filter:alpha(opacity=60)"
width="180" height="120"＞
区域透明度设置，从(0,5)到(90,60)
＜img src="pic1.jpg"
style="filter:alpha(
opacity=0, finishopacity=100,
style=1,
startx=0,starty=5,
finishx=90,finishy=60"
width="180" height="120" ＞
margin:0px;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff45c8ff', endColorStr='#ffffffff', gradientType='0');
}
PS:样式里面只写了滤镜部分了，根据自己需要自己加吧。嘿嘿，我比较懒
解释下这个CSS里面的东西：
startColorStr='#ffeeeeee'
startColorStr为渐变起始颜色，ff为16进制透明度
endColorStr='#ffeeeeee'
endColorStr为渐变结束颜色，ff为16进制透明度
gradientType='0'
gradientType渐变方向，'0'为垂直方向， '1'为水平方向（默认值为'1'）
-->
</body>
</html>
posted on 2008-01-23 17:40
sanni 阅读(340)
评论(0) 编辑 收藏 引用