原文地址:<a href="http://www.ibm.com/developerworks/cn/web/1105_qinjian_css3_3/index.html?ca=drs-">原文</a>
Opacity 透明度
透明度属性是 CSS 中非常常用和流行的一个属性,目前已经广泛被主要浏览器支持,可惜的是 IE6/7/8 均不支持该属性。虽然 IE 没有支持这个 CSS 属性,但是我们可以通过使用 IE 特有的滤镜 filter 属性来实现相同效果。
清单 1. Opacity 代码示例
opacity: 0.4
; /*Chrome、Safari、Firefox、Opera */
filter: progid
:DXImageTransform.Microsoft.Alpha
(opacity
=40)
; /* IE6/IE7/8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"
; /* IE8 */
|
如上面代码所示,第一行是在其他浏览器中使用 Opacity 属性;第二行是 IE6/7/8 中使用滤镜属性设置透明度;第三行是新的
IE 滤镜属性,它只在 IE8 中起作用在其他浏览器中会被忽略,如果不是针对 IE8 设置,使用第二行代码就可以了。参数的设置与 CSS 中
Opacity 属性也基本相同,在 IE 滤镜中使用 0-100 表示透明度,因此 opacity=40 相当于 Opacity 属性为
0.4,亦即透明度为 40%。使用该滤镜属性有两个缺点:由于使用了 Microsoft 特有的属性,会使得你的 CSS 非验证的;另外,IE
的滤镜属性会使得所有的 HTML 子节点都继承这个属性。
图 1.IE 浏览器中透明度演示


回页首
Border-Radius 圆角效果
圆角效果是 CSS3 中另一个非常常用和流行的效果。它使得程序员不再需要费力的拼装很多圆角图片或者使用大量复杂的
JavaScript 来实现的相同的效果。在很大程度上圆角属性简化了 HTML 代码结构,同时优化了显示效果。然而 IE
全系列浏览器依然不支持这个属性。幸运的是 Remiz Rahnas
使用 VML 编写了一个 HTC 文件,为 IE 浏览器提供圆角效果的支持。
清单 2. 圆角代码示例
-moz-border-radius: 15px
; /*Firefox*/
-webkit-border-radius: 15px
; /*Safari、Chrome*/
border-radius: 15px
; /*Opera 10.5+、IE 6+*/
behavior: url(ie-css3.htc)
; /* 调用脚本添加圆角效果 */
|
如上面代码所示,圆角属性的使用和 CSS 圆角属性一致,只是在后面多添加了一句 behavior:
url(ie-css3.htc)。behavior 属性只被 IE 浏览器支持和识别,用来告诉 IE 在哪些设置了该样式 Class
的元素上调用脚本添加圆角效果。一句简洁的代码就使得 IE 支持圆角效果,而不需要你额外的维护任何代码。然而这种折中的方法也有一些缺陷:首先,在
Server 端需要引入一个 HTC 文件,经过 gzip 压缩后对 server 端和 client
端性能应该不会有太大的影响;其次,它会使你的 CSS 验证不合法;另外,这个脚本在 IE8 上有一些问题,它会使 z-index
值变成负数。因此使用时还需要小心。
图 2.IE 浏览器中圆角效果演示

回页首
Box Shadow 盒阴影
盒阴影是另一个 CSS3 中的很有用的属性,它使得程序员可以通过简单的添加一个属性,就创建出一个立体效果带有阴影的元素。在
IE 全系列浏览器中依然在不支持这个属性,但 IE 为这个效果提供了滤镜属性;另外和上面圆角效果一样,我们可以通过 VML 脚本来实现这个效果。
清单 3.Box Shadow 的滤镜实现代码
-moz-box-shadow: 2px 2px 3px #969696
; /* Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696
; /* Safari and Chrome */
filter: progid
:DXImageTransform.Microsoft.Shadow
(color
='#969696',
Direction
=145, Strength
=3)
;
|
清单 4.Box Shadow 的 VML 脚本实现
-moz-box-shadow: 2px 2px 3px #969696
; /* Firefox */
-webkit-box-shadow: 2px 2px 3px #969696
; /* Safari and Chrome */
box-shadow: 2px 2px 3px #969696
; /* Opera 10.5+、IE6+*/
behavior: url(ie-css3.htc)
; /* 调用脚本添加阴影效果 */
|
如上面代码所示,上面两种方法均可实现这个效果。但是要注意的是,IE 滤镜效果语法与其他浏览器中 CSS3 属性语法不同。因此需要开发人员仔细调试使得在不同浏览器中看起来有相同的效果。
图 3.IE 浏览器中盒阴影效果演示

回页首
Text Shadow
文字阴影在不仅流行于打印效果中,同时也在 Web 设计中也非常流行。然而对于 Text Shadow
这个属性我们就没有那么好运气了,IE 没有提供相应的滤镜效果,也没有现成的 VML 脚本可以使用。在过去的 Web
开发中,我们通常使用图片来实现文字阴影效果。Kilian Valkhof
为了解决 IE 下实现文字阴影这个难题,而编写了一个 jQuery 的插件。
清单 5.IE 浏览器中实现 Text Shadow 效果代码
text-shadow: #aaa 5px 5px 8px
;
$(document).ready(function
(){
$(".text-shadow").textShadow();
});
|
如上面代码所示,下载了 jQuery 核心包和 Drop Shadow 插件后我们就可以在 IE 中使用文字阴影效果了。textShadow() 方法还可以填入一个 JavaScript 对象参数,如下表所示:
表 1.textShadow 属性参数表
属性名
|
类型
|
默认值
|
描述
|
left
|
整型
|
4
|
阴影距离
|
top
|
整型
|
4
|
阴影角度
|
blur
|
整型
|
2
|
阴影扩散度
|
opacity
|
0-1 小数
|
0.5
|
阴影透明度
|
color
|
颜色值
|
black
|
字体阴影颜色
|
swap
|
布尔
|
false
|
是否换行
|
图 4.Text Shadow 演示图

回页首
Gradients 渐变色
CSS3 中的渐变色为渐变背景色提供了很大的方便,我们不必为了渐变的背景色使用大量细小的图片,同时也不用为了适应浏览器分辨率做很多工作。尽管 IE 浏览器还是不支持该属性,我们依然可以通过 IE 是由的滤镜属性实现该效果。
清单 6.IE 浏览器中实现渐变色
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1)
; /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,
color-stop(0, #4477a1),color-stop(1, #81a8cb))
; /* Safari & Chrome */
filter: progid
:DXImageTransform.Microsoft.gradient
(GradientType
=0,
startColorstr
='#81a8cb', endColorstr
='#4477a1')
; /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType=0,
startColorstr='#81a8cb', endColorstr='#4477a1')"
; /* IE8 */
|
如上面代码所示,我们可以使用 IE 的私有的滤镜来实现该效果。其中 GradientType 可以有两个选项值 0 和
1,分别代表水平渐变和垂直渐变。startColorstr 和 endColorstr
分别代表渐变开始的颜色值和结束的颜色值。虽然参数和功能不如 CSS3 中的渐变多,但是对已一般的需求来说也算够用了。另外该滤镜属性在 IE6/7
和 IE8 中支持的语法不相同,因此我们需要写不同的代码去做 IE6/7 和 IE8 的兼容处理。
图 5.IE 浏览器渐变色演示

回页首
RGBA 颜色
CSS3 中提供了另一种方式设置背景透明度,那就是 RGBA 颜色。RGBA 颜色使得开发人员在指定颜色时,不仅可以指定
R、G、B 三原色的值,同时还可以指定颜色的透明度。这样我们就就可以在浏览器中实现类似 Windows7 中一样透明的玻璃效果,这大大增强了
Web 程序的视觉感官体验。在 IE 全系列浏览器中依然不支持 RGBA 颜色,我们只能利用 IE 滤镜模拟实现这样的效果。
清单 7.IE 浏览器 RGBA 颜色实现代码
background: rgba(50, 95, 224, .4)
;
filter:progid
:DXImageTransform.Microsoft.gradient
(GradientType
=0,
startColorstr
='#886287a7', endColorstr
='#886287a7')
;
|
如上面代码所示,利用 IE 中渐变色滤镜将渐变开始颜色和结束颜色设置相同,能模拟出和其他浏览器十分类似的 RGBA
颜色效果。另外为了在 IE 中获得较好的透明背景效果,使用 PNG
图片作为背景图片也是一个很不错的选择。不过这样做的缺点是你不得不处理大量的图片,同时为了适应图片背景不得不修改 HTML 的结构。
图 6.IE 浏览器中滤镜实现 RGBA 颜色效果

回页首
Rotation 旋转
在最新的 Firefox 和 Webkit 浏览器中都对 CSS3
形变和动画效果做了不同程度的支持。你可以旋转、拉伸、平移一个 HTML 元素来实现以前只能用图片实现的立体效果,也可以使用 CSS
属性来实现绚丽的淡入、淡出等动画效果。目前 IE 全系列浏览器还不支持该属性,但是很少有人知道使用 IE 的滤镜可以实现简单的 HTML
元素旋转的效果。
清单 8.IE 浏览器中实现旋转
-webkit-transform: rotate(90deg)
;
-moz-transform: rotate(90deg)
;
filter: progid
:DXImageTransform.Microsoft.BasicImage
(rotation
=1)
;
|
如上面代码所示,最后一行代码在 IE 中实现旋转效果。其中的参数 rotation 的选项为 1、2、3 和四,分别代表旋转 90
度、180 度、270 度和 360 度。和 CSS3 中的旋转 360 度功能相比,IE 中的旋转滤镜功能就显得十分有限了,每次 90
度的旋转很难满足开发人员的需求。
另外 dojo 在 1.5 版本对 CSS3 中的 transform 属性开始有一定的支持,其中包括了
matrix、rotate、skew、scale、translate 等功能。如果有 CSS3 形变需求的话,可以参考使用 dojo
对这部分功能的扩展。
清单 9. 使用 dojo 设置 HTML 元素旋转
dojox.html.ext-dojo.style("transform","rotate(10deg)");
|
图 7.IE 浏览器中滤镜实现 HTML 元素旋转

回页首
小结
CSS3
虽然还没有正式发布,但是各个浏览器厂商已经开始部分支持这些新特性了。这些新特性的支持给我来带了很多惊喜,使我们很容易实现我们意想不到的华丽的效
果,简化了很多前端实现的代码。但是 CSS3 也给我们带来了很多困扰,各个浏览器厂商对 CSS3 标准支持不一致,尤其是特立独行的 IE
给开发人员带来更多的麻烦。为了实现 Web 程序的跨浏览器和显示的一致性,我们不得不花费很多时间在各个浏览器差异的调试上。本文针对部分 IE
不支持的 CSS3 效果以及在 IE 浏览器上的替代方案做了详细的介绍。希望能为广大开发者在未来的开发工作中提供一点启示。
分享到:
相关推荐
内容概要:本文详细介绍了基于MATLAB GUI界面和卷积神经网络(CNN)的模糊车牌识别系统。该系统旨在解决现实中车牌因模糊不清导致识别困难的问题。文中阐述了整个流程的关键步骤,包括图像的模糊还原、灰度化、阈值化、边缘检测、孔洞填充、形态学操作、滤波操作、车牌定位、字符分割以及最终的字符识别。通过使用维纳滤波或最小二乘法约束滤波进行模糊还原,再利用CNN的强大特征提取能力完成字符分类。此外,还特别强调了MATLAB GUI界面的设计,使得用户能直观便捷地操作整个系统。 适合人群:对图像处理和深度学习感兴趣的科研人员、高校学生及从事相关领域的工程师。 使用场景及目标:适用于交通管理、智能停车场等领域,用于提升车牌识别的准确性和效率,特别是在面对模糊车牌时的表现。 其他说明:文中提供了部分关键代码片段作为参考,并对实验结果进行了详细的分析,展示了系统在不同环境下的表现情况及其潜在的应用前景。
嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip
嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip
内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。
少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
内容概要:本文详细介绍了基于PID控制器的四象限直流电机速度驱动控制系统仿真模型及其永磁直流电机(PMDC)转速控制模型。首先阐述了PID控制器的工作原理,即通过对系统误差的比例、积分和微分运算来调整电机的驱动信号,从而实现转速的精确控制。接着讨论了如何利用PID控制器使有刷PMDC电机在四个象限中精确跟踪参考速度,并展示了仿真模型在应对快速负载扰动时的有效性和稳定性。最后,提供了Simulink仿真模型和详细的Word模型说明文档,帮助读者理解和调整PID控制器参数,以达到最佳控制效果。 适合人群:从事电力电子与电机控制领域的研究人员和技术人员,尤其是对四象限直流电机速度驱动控制系统感兴趣的读者。 使用场景及目标:适用于需要深入了解和掌握四象限直流电机速度驱动控制系统设计与实现的研究人员和技术人员。目标是在实际项目中能够运用PID控制器实现电机转速的精确控制,并提高系统的稳定性和抗干扰能力。 其他说明:文中引用了多篇相关领域的权威文献,确保了理论依据的可靠性和实用性。此外,提供的Simulink模型和Word文档有助于读者更好地理解和实践所介绍的内容。
嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip
少儿编程scratch项目源代码文件案例素材-驾驶通关.zip
小区开放对周边道路通行能力影响的研究.pdf
内容概要:本文探讨了冷链物流车辆路径优化问题,特别是如何通过NSGA-2遗传算法和软硬时间窗策略来实现高效、环保和高客户满意度的路径规划。文中介绍了冷链物流的特点及其重要性,提出了软时间窗概念,允许一定的配送时间弹性,同时考虑碳排放成本,以达到绿色物流的目的。此外,还讨论了如何将客户满意度作为路径优化的重要评价标准之一。最后,通过一段简化的Python代码展示了遗传算法的应用。 适合人群:从事物流管理、冷链物流运营的专业人士,以及对遗传算法和路径优化感兴趣的科研人员和技术开发者。 使用场景及目标:适用于冷链物流企业,旨在优化配送路线,降低运营成本,减少碳排放,提升客户满意度。目标是帮助企业实现绿色、高效的物流配送系统。 其他说明:文中提供的代码仅为示意,实际应用需根据具体情况调整参数设置和模型构建。
少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip
内容概要:本文详细介绍了基于STM32F030的无刷电机控制方案,重点在于高压FOC(磁场定向控制)技术和滑膜无感FOC的应用。该方案实现了过载、过欠压、堵转等多种保护机制,并提供了完整的源码、原理图和PCB设计。文中展示了关键代码片段,如滑膜观测器和电流环处理,以及保护机制的具体实现方法。此外,还提到了方案的移植要点和实际测试效果,确保系统的稳定性和高效性。 适合人群:嵌入式系统开发者、电机控制系统工程师、硬件工程师。 使用场景及目标:适用于需要高性能无刷电机控制的应用场景,如工业自动化设备、无人机、电动工具等。目标是提供一种成熟的、经过验证的无刷电机控制方案,帮助开发者快速实现并优化电机控制性能。 其他说明:提供的资料包括详细的原理图、PCB设计文件、源码及测试视频,方便开发者进行学习和应用。
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip
Android系统开发_Linux内核配置_USB-HID设备模拟_通过root权限将Android设备转换为全功能USB键盘的项目实现_该项目需要内核支持configFS文件系统
C# WPF - LiveCharts Project
少儿编程scratch项目源代码文件案例素材-恐怖叉子 动画.zip
嵌入式八股文面试题库资料知识宝典-嵌⼊式⼯程师⾯试⾼频问题.zip