CSS3的新特性以及IE下的实现
随着浏览器的升级,CSS3已经可以投入实际应用了。
但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。上周的YDN 介绍了CSS3 Please 网站,该网站总结了一些常用功能的写法。
以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正。
一、圆角(Rounded Corner)
.box_round {
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3+, Chrome */
border-radius: 30px; /* Opera 10.5, IE 9 */
}
圆角的实现比较简单,只要设好一个半径值就可以了。遗憾的是,目前所有的IE都不支持CSS圆角,要等到IE 9才行。
二、盒状阴影(Box Shadow)
.box_shadow {
-moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* IE8 */
}
-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。
IE 6~8使用其独有的滤镜,需要设置三个参数:offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。
三、线性渐变(Gradient)
.box_gradient {
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */
}
先看Firefox。
-moz-linear-gradient(top, #444444, #999999);
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
-webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999));
-webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。第一个参数表示渐变类型(type),可以是linear(线 性渐变)或者radial(辐射渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示, 比如left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为 起点,0.5为中点,1为结束点;第二个表示该点的颜色。
DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0');
IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。
四、透明(opacity)
正常情况下,上层的对象会覆盖下层的对象。
但是,如果将上层对象的颜色变为透明,就可以透过它看到下层对象。
.box_rgba {
background-color: #B4B490;
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
zoom: 1;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
}
先看第一行。
background-color: #B4B490;
这是设置对象的预备色,也就是不透明时的颜色。如果浏览器不支持透明,就将显示这个颜色。
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
zoom: 1;
这几行是专门为IE写的,其中主要用到 DXImageTransform.Microsoft.gradient滤镜。我们要为它设置起点色(startColorstr)和终点色 (endColorstr)。在单色透明的情况下,这两个值是相同的。需要注意的是,它们的取值是一个八位的十六进制值,前两位表示alpha通道 值,00表示完全透明,FF表示完全不透明;后六位则是这个颜色的RGB值。
background-color: rgba(180, 180, 144, 0.6);
除了IE,其他浏览器几乎都支持rgba函数。它有四个参数,前三个为一种颜色的RGB值,第四个为透明度,这里设为0.6。
五、旋转(rotation)
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */
}
除了IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。
IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数,前四个参数需要自行计算三角函 数,然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;第五个参数 SizingMethod表示重绘方式,'auto expand'代表自动扩展到新的边界。
除了这个滤镜,IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1,2,3,0,分别表示顺时针选择90度、180度、270度和360度。
六、服务器端字体(font-face)
设计网页的时候,可能会用到某种特殊的字体。如果用户的机器中没有安装,文字只能以普通字体显示。
这时可以让用户的浏览器自行下载服务器端字体,然后就能呈现出设计者想要的效果。
@font-face {
font-family: 'MyFont';
src: url('myfont.eot'); /* IE6+ */
src: local('myfont.ttf'),
url('myfont.woff') format('woff'), /* FF3.6 */
url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */
}
第一行代码:
font-family: 'MyFont';
表示为这种字体起一个名称,可以随意设置,我这里用的是MyFont。
src: url('myfont.eot');
这一行表示字体位置,由于ie只支持服务器端的eot字体 ,所以这一行是ie专用的。
src: local('myfont.ttf'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。url()表示字体在服务器上的位置,format()用来说明字体 格式。Firefox 3.5支持TrueType和OpenType字体,Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器(sarif,opera、chrome),目前好像只支持truetype。
然后,使用的时候这样写就可以了。
h2{ font-family: "MyFont"; }
需要注意的是,字体文件必须与网页文件来自同一个域名,符合浏览器的“同源政策”。另外,由于中文字体文件太大,服务器端字体显然只适用于英文字体。
七、其他
利用css3,还可以完成transform(变形),包括skew(扭曲)和scale(缩放),以及css transitions(动态变换)。这些内容待以后再补充。
来源:http://www.ruanyifeng.com/blog/2010/03/cross-browser_css3_features.html
CSS3的新特性以及IE下的实现相关推荐
- css之“css3的新特性”
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- HTML5与CSS3的新特性。
HTML5与CSS3的新特性 1.HTML5新特性 1.1.新特性的兼容问题 HTML5的新增特性主要是针对以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 ...
- 重温CSS3常见新特性的奥秘(个人总结)
最近觉得CSS3真的很神奇,完全掌握了用的时候真的非常有趣,但是就是用的时候很难用好,所以我就整理了一下关于CSS3的新特性,也方便自己查阅,要是文章中有什么不对的或者更好的方法,欢迎大家指出~ tr ...
- CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
- 跟着pink老师学前端之HTML5和CSS3的新特性
文章目录 1. HTML5新特性 1.1 HTML5新增的语义化标签 1.2 HTML5新增的多媒体标签 1. 视频< video> 2. 音频< audio> 1.3 HTM ...
- HTML5和CSS3的新特性(浓缩好记版)
综述:这个问题在面试的时候经常被问到,有必要做一个总结,理解的深刻充分一些 1.html5的新特性?(记住有九大模块内容) 添加了video,radio标签 添加了canvas画布和svg,渲染矢量图 ...
- HTML5 和 CSS3 的新特性--HTML5 的新特性
HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这 ...
- html5,css3,es6新特性总结
html5新特性 语义化标签 如:header,footer,nav,dialog 增强型表单 如:date,week,url,time,email,month 视频和音频 audio和video C ...
- 关于CSS3的新特性(面试经典)
1.过渡属性 transition: 要改变的属性,花费时间,效果曲线(默认ease),延迟时间(默认0) 2.动画属性 animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画 ...
- css3的新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...
最新文章
- 如何区分山寨版网管软件
- Python改变生活 | 轻松识别数百个快递单号
- linux chown命令 改变文件拥有者
- docker下部署Tomcat运行war包
- win7系统服务器环境配置,windows7系统安装与配置Tomcat服务器环境
- ico图标下载 ico大全_我们可以做些什么来向ICO投资者保证我们不会用他们的钱消失...
- page fault in nonpaged area 蓝屏_电脑蓝屏解决四个小技巧
- c语言 inline函数的总结,C++中inline函数详解
- 同步PC和MAC OS X文件夹--arrsync-0.4.1
- 如何防止Tensorflow分配整个GPU内存?
- 在html中进行表单设计,谈谈网页中的表单设计
- bootstrap使用tableExport导出pdf时中文乱码问题
- 优雅的剥洋葱:浅析 Java Optional 类
- 怎么查询上网帐号和上网口令_宽带上网账号和密码忘记了该怎么查询
- 边缘和轮廓检测——计算机视觉的应用
- 支持他们的应用程序突袭Cloudberry狂潮
- 第003天:APP的UI设计
- PLM是做题家吗?一文速览预训练语言模型数学推理能力新进展
- 开源驱动 大黄蜂驱动_客户驱动的开源是软件的未来
- css布局小练习,学会它在室友面前小秀一下吧!
热门文章
- firefox火狐同步windows和linux书签
- SQLServer共享锁,更新锁,排它锁,死锁,默认隔离级别
- 解除pdf文件打印限制
- 白帽子(1)-web世界观
- linux识别新显示器,Linux 显示器未正确识别 最佳分辨率 Ubuntu 10.10 X11
- C++笔记:奇葩排序之猴子排序、珠排序、面条排序
- centos7下docker-mysql5.7实现主从复制(精简教程)
- Idea 报错: Variable used in lambda expression should be final or effectively final
- Electron播放 RTMP流 实现
- WinServer服务器IP访问白名单设置