CSS制作多层重叠渐变

2007年发表于IT168  链接地址：http://publish.it168.com/2007/0531/20070531037301.shtml

笔者根据效果图大致模拟了一张两层渐变的重叠效果图，如下：

图1

    图一采用两层渐变构成，第一层是从上到下的渐变，大小为200px*200px，颜色从#111111过渡到#dddddd，第二层是是从左到右的渐边，右端与第一层渐变对齐，大小为30px*200px，颜色从#aaaaa过渡到#222222,并且透明度为40%，我们可以发现，由于第二层渐变含用透明度，所以上面的色彩明显比下面的色彩要深一点，然而切图却需要将整幅图切成一块。

    首先我们先来看看这个CSS滤镜:
    FILTER:progid:DXImageTransform.Microsoft.Gradient

    语法：

    filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , endColorStr=iWidth )

    具体属性我这就不再多讲了，大家有兴趣可以到网上搜一下苏小雨的样式表滤镜中文手册。

    具体实现代码：

<style> .aDiv { position:absolute; top:0px; left:0px; width:200px; height:200px; z-index:1; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff111111",endColorStr="#ffdddddd",gradientType="0" ); } .bDiv { position:absolute; top:0px; left:170px; width:30px; height:200px; z-index:2; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#66aaaaaa",endColorStr="#66222222",gradientType="1" ); } </style> <div class="aDiv"></div> <div class="bDiv"></div>

 2007年发表于IT168