(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24)

今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是:

-moz-box-shadow:0 4px 4px #999;

-webkit-box-shadow:0 4px 4px #999;

box-shadow:0 4px 4px #999;

使用#设置的颜色是没有透明效果的。这样设置阴影的颜色,如果阴影落在的位置不是白色的,甚至是动态的,例如落在了幻灯片上,好几张不同颜色的图片轮播。那么这样设置阴影的颜色,会是阴影效果看起来很假!

解决办法:使用rgba来代替。

-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);

-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);

box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);

这里要交代一下:

ie6和ie7应该是不支持box-shadow属性的。

可以使用:*filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); 来代替

由于我设置的阴影并不要求一定要在所有浏览器中显示。所以我没有添加这行代码,所以也没有验证在这里将Color="#888888"中的颜色用rgba来代替是否可行,有需要的朋友自己验证去,估计够呛!

我的原则:

只要不是布局错位等问题,我是不会做兼容性修改的。

为了少部分不升级浏览器的顽固派,没有必要增加一行冗余代码,既然用的旧版本浏览器,那看到的效果不够漂亮是肯定的。

之所以好多旧版本ie浏览器到现在还存在,都是前端惯的!

如果不是嫌麻烦的话,就应该给ie6或者ie7的用户专门编写一套网页布局。ie6的浏览器一打开就是那种2000年网站的风格。不是喜欢怀旧吗?怀旧去吧!

如何设置box shadow的透明度的更多相关文章

  1. Android课程---Android 如何用滑杆(SeekBar)组件设置图片颜色的透明度(转)

    Android系统支持的颜色是由4个值组成的,前3个为RGB,也就是我们常说的三原色(红.绿.蓝),最后一个值是A,也就是Alpha.这4个值都在0~255之间.颜色值越小,表示该颜色越淡,颜色值越大 ...

  2. Android 设置图片 Bitmap任意透明度

    两种思路,第一种思路是通过对Bitmap进行操作,将Bitmap的像素值get到一个int[]数组里,因为在android里Bitmap通常是ARGB8888格式,所以最高位就是A通道的值,对齐进行改 ...

  3. Android设置顶部banner背景透明度时影响全局背景问题

    项目中用到滑动界面使顶部title栏背景渐隐渐现的效果,即初始不滑动时的透明度为0,用了bannerle.getBackground().setAlpha(0); 但使用这个方法设置透明度是管用,返回 ...

  4. iOS中为控件设置颜色渐变和透明度渐变

    项目中用到地图设置渐变色,查找资料找到两种方法:一种设置颜色,一种设置透明度: //为颜色设置渐变效果: UIView *view = [[UIView alloc] initWithFrame:CG ...

  5. 使用JavaScript设置和改变CSS透明度

    在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的 ...

  6. iOS 设置视图背景的透明度

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #00afca } span.s1 { color: #fffff ...

  7. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  8. CSS 设置背景透明度,不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  9. css设置透明度

    使用新的CSS3的"RGBA"声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度. RGBA像RGB一样设置颜色,而这个"A"--RGBA中的最 ...

随机推荐

  1. [Everyday Mathematics]20150304

    证明: $$\bex \frac{2}{\pi}\int_0^\infty \frac{1-\cos 1\cos \lm-\lm \sin 1\sin \lm}{1-\lm^2}\cos \lm x\ ...

  2. [转载]C++异常机制的实现方式和开销分析

    原文章网址:http://baiy.cn/doc/cpp/inside_exception.htm C++异常机制的实现方式和开销分析 白杨 http://baiy.cn 在我几年前开始写<C+ ...

  3. C#判断程序是由Windows服务启动还是用户启动

    在Windows系统做网络开发,很多时候都是使用Windows服务的模式,但在调度阶段,我们更多的是使用控制台的模式.在开发程序的时候,我们在Program的Main入口进行判断.最初开始使用Envi ...

  4. Ruby相关图书推荐

    Ruby基础教程第4版 作      者 [日] 高桥征义,[日] 后藤裕藏 著:何文斯 译:[日] 松本行弘 校 出 版 社 人民邮电出版社 出版时间 2014-09-01 版      次 4 页 ...

  5. (转)log4j:WARN No appenders could be found for logger 解决方案

    我们在使用Log4j的时候,总是出现: log4j:WARN No appenders could be found for logger (org.apache.ibatis.logging.Log ...

  6. effective c++:virtual函数在构造函数和析构函数中的注意事项

    如不使用自动生成函数要明确拒绝 对于一个类,如果你没有声明,c++会自动生成一个构造函数,一个析构函数,一个copy构造函数和一个copy assignment操作符. class Empty { p ...

  7. How To Set Up Port Forwarding in Linux

    Port forwarding usually used when we want our computer act like a router. Our computer receive the p ...

  8. Linker scripts之Intro

    1 Intro Every link is controlled by a linker script. The main purpose of the linker script is to des ...

  9. 200 OK (from cache) 与 304 Not Modified

    解释: 200 OK (from cache)  是浏览器没有跟服务器确认,直接用了浏览器缓存: 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性,再用的缓存. 触发区别: 2 ...

  10. 通过VMware Tools 将主机windows的目录共享给linux虚拟机

    之前有写过 本地虚拟机挂载windows共享目录搭建开发环境 这篇,里面讲通过使用samba来实现网络共享 最近发现其实完全不用这么麻烦,VMware tools就可以帮助我们轻松的共享文件夹 这里引 ...