Multiple Backgrounds多重背景图片
支持CSS3多重背景图片的浏览器中可以用下面的语句来实现背景多重图片:
复制代码
background: url(bg-image-1.gif) center center no-repeat, url(bg-image-2.gif) top left;
要在IE中实现多背景图片,在需要在单独的IE hack样式表中加入下面的代码:
复制代码
background: transparent url(bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’bg-image-2.gif’, sizingMethod=’crop’); /* IE6+ */
CSS3浏览器的多重背景
IE的多重背景
Tranformations/rotate旋转元素
IE中有两个滤镜可以实现元素的旋转,BasicImage和Matrix,前者简单方便但是只能做90*n(n∈{1,2,3,4})度的旋转;Matrix滤镜功能强大,但是参数复杂。
复制代码
-moz-transform: rotate(180deg); /* FF3.5+ */
-o-transform: rotate(180deg); /* Opera 10.5 */
-webkit-transform: rotate(180deg); /* Saf3.1+, Chrome */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’,M11=-1, M12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22=-1);
旋转也很简单
@font-face服务器端字体
考虑到汉字字体的尺寸,这个CSS3的特性不算实用
复制代码
font-family:’webFont’;
src:url(‘myfont.eot’);/*IE6+*/
src:local(‘fontname’),/*字体名称*/
url(‘myfont.woff’) format(‘woff’),/*FF3.6*/
url(‘myfont.ttf’) format(‘truetype’);/*saf3+,chrome,FF3.5,opera10+*/
字体声明并引用了以后,可以在网页的其他地方用font-family使用这一字体。
可以在同一个元素上启用多个滤镜,如:
复制代码
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#000000′, Direction=145, Strength=5)progid:DXImageTransform.Microsoft.Alpha(opacity=40);
虽然一些用滤镜模仿CSS3的效果难称完美,但在一些情况下,运用这些技术能够让我们的代码更为简洁和统一










