CSS制作多层重叠渐变

原创 2007年10月05日 13:35:00

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

纯CSS制作的渐变层(兼容IE/Firefox/Opera)

使用纯CSS制作渐变层,渐变是效果有从左到右,从右到左,从上到下,从下到上。 效果如下:   Shadow.css文件: /********************************...

css层与层的重叠

  • 2012年04月10日 11:27
  • 13KB
  • 下载

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(5)使用放射渐变制作光影效果

阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建。...
  • kgsew
  • kgsew
  • 2014年12月16日 17:10
  • 986

多层嵌套的CSS 3D动画技术详解

IE9及其以下版本完全不支持CSS 3D transforms技术,Opera 12也不支持。具体支持信息请查看caniuse.com。 CSS动画是当前一种非常火爆的技术,我说的并不是一些...

基于IE与css的表格行头与多层列头锁定方法(转)

从网上看到的,正好项目中用到了,就拿来一用,但是这个有一个问题,就是完成后移动滚动条会出现分隔线混乱的情况,如图所示: 红色是正常的分隔线,绿色是混乱的,要是有解决方式的,希望能留言出出主意哦。 ...

html+css实现多层表格嵌套

很多时候我们要的表格并不是一级的,有时候可能会有两级或者三级,就像这样的表格: 如果用div来写的话,对宽高不好控制,当然如果数据好处理,我们都会用一个table通过合并行或合并列来制作,但有时候我们...

css的margin重叠问题

1.问题场景 2.我的实际问题 由于两个margin边框重合,导致margin-top:80px;属性无法正常显示。(由于面包屑导航模块高度大于80px,故无法显示) 3.解决方案 在区块二中增加f...

CSS 外边距(margin)重叠及防止方法

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒...

浅析CSS——元素重叠及position定位的z-index顺序

转载地址: http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html 多次在项目中遇到html页面元素的非期待重叠错误,多数还是po...
  • jarniyy
  • jarniyy
  • 2016年06月15日 17:14
  • 395

CSS:margin重叠-父子关系

转载此处 css中父div里面有一个子div,给子div添加margin-top: 20px,发现了一个问题!! 给子div添加margin-top: 20px,发现父子DIV都一起相对BOD...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS制作多层重叠渐变
举报原因:
原因补充:

(最多只允许输入30个字)