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>
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？新建账号
×
|
