如何设置box shadow的透明度

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期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年网站的风格。不是喜欢怀旧吗?怀旧去吧!

时间: 2024-10-01 03:52:31

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

Android设置控件的透明度

设置控件如View,Button等的透明度,有这么几种方法. 比如这里设置按钮button1的透明度. 1.可以在后台的Activity中进行设置.在这里设置button1为半透明,则加上button1.getBackground().setAlpha(128).setAlpha()的括号中可以填0--255之间的数字.数字越大,越不透明.但是这么做的话,不能即时的看到预览,因此无法很好地确定透明度.以下的方法均可以看到设置后的效果,因此可以通过看到的预览来调整透明度. 2.还可以在布局中进行设

动画效果-基础动画设置(改变大小,改变透明度,翻转,旋转,复原)

在可视化编程下 #import "BaseViewController.h" @interface BaseViewController () @property (weak, nonatomic) IBOutlet UIImageView *imageView; @end @implementation BaseViewController - (void)viewDidLoad { [super viewDidLoad]; } - (void)didReceiveMemoryWar

通过获取input的值来设置box的style属性

在第一个input里输入属性的名字,在第二个input里输入单位,通过点击按钮,改变下面box的属性, 比如,在第一个input里输入width,第二个输入,200px,点击按钮,box,宽就会改变 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

Android 设置图片 Bitmap任意透明度

两种思路,第一种思路是通过对Bitmap进行操作,将Bitmap的像素值get到一个int[]数组里,因为在android里Bitmap通常是ARGB8888格式,所以最高位就是A通道的值,对齐进行改变后再新建一个Bitmap即可.第二种思路是通过设置canvas的paint的透明度,然后通过canvas.drawBitmap()来改变View的透明度.具体代码如下: 第一种思路: public static Bitmap getTransparentBitmap(Bitmap sourceIm

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

Android系统支持的颜色是由4个值组成的,前3个为RGB,也就是我们常说的三原色(红.绿.蓝),最后一个值是A,也就是Alpha.这4个值都在0~255之间.颜色值越小,表示该颜色越淡,颜色值越大,表示该颜色越深.如果RGB都是0,就是黑色,如果都为255,就是白色.Alpha也需要在0~255之间变化.Alpha的值越小,颜色就越透明,Alpha的值越大,颜色就不透明.当Alpha的值为0时,颜色完全透明,完全透明的位图或者图形从View上消失.当Alpha的值为255时,颜色不透明.从A

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

在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的IE在广泛使用,透明度设置是不同的,有时需要额外的CSS来控制: #myElement {filter: alpha(opacity=40);}您可以使用下面的语法访问JavaScript中的CSS opacity 属性: document.getElementById("myElement&quo

IDEA优化配置--- Intellij IDEA 2017 / 2018设置背景图片与透明度

一.前言:IDEA中主题可以更换,大家可以直接到 http://www.riaway.com/  网站,直接下载自己喜欢的主题.然后导入进去IDEA中,IDEA中代码编辑器和控制台的字体颜色和背景就会发生改变.这些主题导入IDEA之后,如果对某些个字体颜色配色方案不满意的,还可以在IDEA中修改设置,很人性化. 我个人比较喜欢这款 Nice Python 主题,还可以对部分颜色配色方案进行了微调,以使其更加适合个人口味. 二.设置背景图片[适用于Intellij IDEA 2018.3及以上版本

CSS设置div元素的透明度

在IE中需要通过"filter"来定义透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持,需要把两种设定都加进去. .div { filter:alpha(opacity=50);/*IE*/ opacity:0.5;/*Mozilla*/ } 用下面的样式表定义你的div可以有各种过度效果..alpha是div的class.精心开发5年的UI前端框架! .alpha {

iOS 设置视图背景的透明度

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #00afca } span.s1 { color: #ffffff } span.s2 { color: #c2349b } span.s3 { } span.s4 { color: #8b84cf } self.backgroundColor = [[UIColor blackColor]colorWithAlphaComponent:0.8f]: