IE中的CSS3不完全兼容方案


到Internet Explorer 8为止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后,就想着...
       到Internet Explorer 8为止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后,就想着用更为简洁、直接有效、CSS3式的办法来解决这些问题。好在就算是饱受批评的Internet Explorer,其本身也是足够强大的。IE特有的技术可以很好的实现一些CSS3的效果。
Opacity透明度
        元素的透明度在IE中可以很方便的用滤镜来实现。


border-radius圆角/Box Shadow盒阴影/Text Shadow文字阴影


       在IE中可以利用Vector Markup Language (VML)和javascript来实现这些效果,,在引用了一个HTC文件后,在IE浏览器中就可以使用这三种CSS3属性了。



       实际上,在IE中有滤镜来实现阴影(shadow)和投影(drop-shadow)效果的


shadow会产生连续、渐变的阴影



drop-shadow产生的阴影没有明暗变化



        滤镜似乎和现有的htc脚本有冲突,或者可以称之为特性:两者同时在一个元素上启用的时候,滤镜效果会转移到其子元素上


Gradients渐变


IE中提供了一个简单的渐变滤镜



        在实现IE中的渐变很简单


RGBA透明度颜色背景


        渐变滤镜支持RGBA的颜色,startColorStr和EndColorStr的前两位是Alpha通道值。使用带alpha通道来模拟RGBA颜色背景的同时,应该去掉其background-color属性。



Multiple Backgrounds多重背景图片


        支持CSS3多重背景图片的浏览器中可以用下面的语句来实现背景多重图片:



       要在IE中实现多背景图片,在需要在单独的IE hack样式表中加入下面的代码:



CSS3浏览器的多重背景


IE的多重背景


Tranformations/rotate旋转元素


        IE中有两个滤镜可以实现元素的旋转,BasicImage和Matrix,前者简单方便但是只能做90*n(n∈{1,2,3,4})度的旋转;Matrix滤镜功能强大,但是参数复杂。



旋转也很简单


@font-face服务器端字体


考虑到汉字字体的尺寸,这个CSS3的特性不算实用



       字体声明并引用了以后,可以在网页的其他地方用font-family使用这一字体。


       可以在同一个元素上启用多个滤镜,如:



虽然一些用滤镜模仿CSS3的效果难称完美,但在一些情况下,运用这些技术能够让我们的代码更为简洁和统一

标签: cssshadowie

更多 css 相关资讯

纯css3 transforms 3D文字翻开翻转3D开放式效果

纯css3 transforms 3D文字翻开翻转3D开放式效果

在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。 在线预览 立即下载AnimatedOpeningType.zip htm

CSS 3中弹性盒布局的最新版

CSS 3中弹性盒布局的最新版

 CSS 3中弹性盒布局的最新版概述   在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。   虽然可以使用其他CSS样

10 个轻松学会 CSS3 的优秀在线资源

10 个轻松学会 CSS3 的优秀在线资源

本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本。这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web

10条影响CSS渲染速度的写法与建议

1、*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把

你未必知道的CSS小知识:text-decoration属性变成了属性简写

你未必知道的CSS小知识:text-decoration属性变成了属性简写

我相信有些小知识会让你大吃一惊。 跟着最新的CSS规范,text-decoration现在的写法是这样的: a { text-decoration: overline aqua wavy; }复制代码text-decoration

使用CSS3设计漂亮的动画效果3D大按钮

使用CSS3设计漂亮的动画效果3D大按钮

本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮 HTML代码 首先定义一个3D按钮的HTML,如下: <a href="#null">极客标签</a>复制代码 CSS代码

8款超酷实用的CSS3 Tab菜单集合

8款超酷实用的CSS3 Tab菜单集合

在网页应用中,有一种既方便用户浏览又节省空间的应用就是Tab菜单了,今天我们精选了一些基于CSS3的Tab菜单,效果很酷,而且比较实用。 1、CSS3华丽的Tab菜单 带小图标动画

CSS FILTERS:CSS过滤器能够做什么?

CSS FILTERS:CSS过滤器能够做什么?

CSS过滤器(CSS filters)已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在,CSS filters 不在局限于在SVG中使用,也可以在图片、文字和其它元素上使

使用CSS制作APPLE WATCH刻度盘动画效果

使用CSS制作APPLE WATCH刻度盘动画效果

在这篇文章中,我们将使用CSS来实现Apple Watch界面中的刻度盘动画效果。如果看过Apple Watch的宣传页面,就会看到其中有一个红绿蓝三色形成一个圆形刻度盘动画的效果。查看演

Web开发中20个很有用的CSS库

Web开发中20个很有用的CSS库

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样

更多 shadow 相关资讯

CSS3阴影效果(兼容N多浏览器)

CSS3阴影效果(兼容N多浏览器)

一、无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如某些网站的头像修饰效果: 然而,在CSS2的时代,我们多半使用图片实现类似效果,或

基于Edge Animate可视化工具开发CSS3动画

基于Edge Animate可视化工具开发CSS3动画

今天这篇文章主要介绍透过Adobe Edge Animate这款可视化工具操作CSS3的动画,与前一篇文章的根本区别就是Edge Animation制作动画是可视化的,操作CSS3动画的方式是和Jav

CSS实现跨浏览器兼容性的盒阴影效果

CSS实现跨浏览器兼容性的盒阴影效果

一、无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果: 然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用C

更多 ie 相关资讯

十个实用但IE不支持的CSS属性

对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6。当然,这样的想法是非常病态的,马

css布局九决 学css不再难

css布局九决 学css不再难

     一、IE边框若显若无,须注意,定是高度设置已忘记;   二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;   三、三像素文本慢移不必慌,高度设置帮

让网站变灰的css代码(支持IE、Firefox和Chrome)

让网站变灰的css代码(支持IE、Firefox和Chrome)

    四川雅安芦山发生7.0级别大地震,不少网站首页已经变成了灰色表示哀悼。下面笔者整理了几种让网页变灰色的CSS代码,供大家参考!   方法1:支持IE   说明:此方法支持I

在IE中使用高级CSS3选择器

别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简化我们的工作,提高我们的代码效率,并让我们很方便的