找回密码
 新建账号

[CSS] CSS box-shadow opacity 在标准浏览器和IE 6 7 8 9 10 11中的兼容

[复制链接]
php 发表于 2014/4/13 18:54 | 显示全部楼层 |阅读模式
CSS box-shadow即盒子阴影,可以用来给盒子设置阴影,Google Chrome, Firefox, Opera, Safari, IE9以上版本都支持,IE6 IE7 IE8不支持,可以使用滤镜实现
CSS opacity即盒子透明,用来设置不透明度,不透明度反过理解就是透明度,不透明度越高,透明度就越低。opacity取值在0-1之间,数值越小透明度越高。Google Chrome, Firefox, Opera, Safari, IE9以上版本都支持opacity,IE6 IE7 IE8不支持,可以使用滤镜实现。
需要注意的是IE 6 7 8中要使用滤镜设置阴影或透明的元素必须是块元素,或者以块元素形式(block、inline-block)显示的行元素。
扯淡的是不同版本的IE浏览器支持不同的滤镜,下面是一个完整的实例,已注释提供详细的对比信息。
如有需要请下载附件查看,不要直接复制以下代码。
<!-- www.51-n.com -->
<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>盒子阴影</title>
        <style type="text/css">
                .cm{
                        display:block;
                        height:30px;
                        line-height:30px;
                }
                .opacity{
                        /*下级元素会继承透明属性*/
                        opacity:0.5;/* 标准浏览器和IE9+支持 */
                        /* 以下三条样式只在IE浏览器中有效,任选其中一项即可,注意最后一项只支持IE8以上版本的IE,IE9开始已经支持标准的opacity了 */
                        /* 标准样式opacity的取值范围是0-1,而IE滤镜中的opacity取值范围是0-100,相当于标准样式opacity的值乘以100 */
                        filter:alpha(opacity=50); /* IE6+支持,必须是块元素或以块元素形式显示,IE6/7必须指定盒子宽度或高度,否则会失效,IE8不需要设置宽度或高度。 */
                        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);/* IE6+支持,不能加引号,其他同上。 */
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*  不支持IE6/7,IE8+支持 必须加引号 其他同上 */
                }
                .boxshadow{
                        box-shadow:10px 10px 10px #cccccc inset;/* IE9+及标准浏览器支持,IE8及更低版本只能通过滤镜或通过背景图片实现 */
                        /*
                         最多可以设置6个参数,分别是水平偏移距离,垂直偏移距离,模糊距离,阴影尺寸,阴影颜色,阴影位置,在盒子内部则设置inset,否则省略此参数
                         前四个参数是长度值,只有水平偏移和垂直偏移两个参数是必须的
                         如果出现了三个长度值,第三个值是模糊距离,出现了第四个长度值则第三四个值分别是模糊距离和阴影尺寸
                          阴影颜色和阴影(内外)位置必须放在所有尺寸值后面,inset必须放在最后
                        */
                        filter:"progid:DXImageTransform.Microsoft.Shadow(strength=10,direction=-135,color='#1874cd')";/* IE 5+,包括IE8,外层引号可以删除 */
                        -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(strength=20,direction=135,color='#1874cd')"; /* IE9+ 必须保留外层引号,和box-shadow同时出现时会优先使用box-shadow的样式 */        
                        /* strength是阴影大小,direction是阴影方位,单位为度,可以为负数,color是阴影颜色 */
                        /* 使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示(block或inline-block;) */
                }
        </style>
</head>
<body>
<span class="transparent boxshadow cm"><a href="//www.51-n.com/">www.51-n.com</a></span>
</body>
</html>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?新建账号

×
 楼主| php 发表于 2014/4/13 19:50 来自手机 | 显示全部楼层
将opacity设置为0则完全透明。

手机版|轻松E站

GMT+8, 2024/3/28 22:33

快速回复 返回顶部 返回列表