CSS3 opacity 是透明属性，怎样让一个DIV左右两边慢慢透明掉，中间不透明?相对来说opacity的值就是这样子，不可能要我分成N个DIV设置不同的opacity 值了0.1 0.3 0.5 0.7 0.9 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0.9 0.7 0.5 0.3 0.1坛里谁做过这样的效果啊。。也就是说要渐变透明。
调试欢乐多
变通一下应该就可以了
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：
<head>
<title>CSS渐变色</title>
<style type="text/css">
.test {
width:560px;
height:400px;
background-color:#FFFFFF;
padding:10px 8px 6px;
border: 1px solid #000;
margin-bottom:10px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*非IE6的其它*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*非IE6的其它*/
}
</style>
</head>
<body>
<div class="test">
用CSS生成的渐变色。源码来自：烈火下载 http://www.veryhuo.com/down
</div>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
下面那几个都是背景属性。。上面那个filter属性就可以，但只是ie下。唠叨大神求css3的方法
http://jsbin.com/amujel/edit#html,live
要透明你可以把颜色值改成rgba格式，比如#ff0000,就是rgba(255,0,0,0.1),后面这个0.1就是透明度。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js淡入淡出</title>
<style>
* { font-size:12px;}
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; background-color:buttonface; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
</style>
</head>
<body>
<div id="w">
<div id="t">演示Windows的淡入淡出窗口</div>
</div>
</body>
<script>
(function(o,i,s){
i=1;s=0.01;
setInterval(function(){
i+=s; s=i<0?0.01:(i>1?-0.01:s);
if(o.filters)o.filters[0].opacity=i*100;
else o.style.opacity=i;
},1);
})(document.getElementById("w"));
</script>
</html>
看看这个怎么样？！