CSS3中如何实现渐变效果

html-css015

CSS3中如何实现渐变效果,第1张

CSS3里面的线性渐变:linear-gradient

1、语法

2、参数

第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:

第一个参数省略时,默认为“180deg”,等同于“to bottom”。

第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

例如:

background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet)

该属性已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

/*上下线性渐变(兼容IE10及以上)*/

background:-webkit-linear-gradient(#fff,#000)/*兼容webkit内核,比如Chrome*/

background:-moz-linear-gradient(#fff,#000)/*兼容老火狐浏览器*/

background:-o-linear-gradient(#fff,#000)/*兼容老欧朋Opera浏览器*/

background:linear-gradient(#fff,#000)/*适用于所有新版本浏览器*/

/*左右线性渐变(兼容IE10及以上,第一个值是left或right)*/

background:-webkit-linear-gradient(left,#fff,#000)/*兼容webkit内核,比如Chrome*/

background:-moz-linear-gradient(left,#fff,#000)/*兼容老火狐浏览器*/

background:-o-linear-gradient(left,#fff,#000)/*兼容老欧朋Opera浏览器*/

background:linear-gradient(left,#fff,#000)/*适用于所有新版本浏览器*/

/*兼容IE6-9渐变(只适用于线性渐变,参数enabled:true表示激活滤镜,false表示不激活;gradientType:0表示上下渐变,1表示左右渐变;startColorStr:起始渐变值,可以是#ffffff形式也可以是#ffffffff形式,此形式前两位表示透明度;endColorStr:结束渐变值,可以是#000000形式也可以是#ff000000形式,此形式前两位表示透明度。)*/

filter:progid:DXImageTransform.Microsoft.Gradient(enabled='true',gradientType=0,startColorStr='#ffffff',endColorStr='#000000')

/*径向渐变(兼容IE10及以上)*/

background:-webkit-radial-gradient(#f00,#0f0,#00f)/*兼容webkit内核,比如Chrome*/

background:-moz-radial-gradient(#f00,#0f0,#00f)/*兼容老火狐浏览器*/

background:-o-radial-gradient(#f00,#0f0,#00f)/*兼容老欧朋Opera浏览器*/

background:radial-gradient(#f00,#0f0,#00f)/*适用于所有新版本浏览器*/

首先它是Windows 8的默认浏览器。IE10在IE9的基础上增强了CSS3解析及硬件加速功能,引进了一些新的特性,如支持

渐变 (CSS 图像值和替换内容), gradient

CSS 动画 (animation)

CSS 过渡 (transition)

CSS 变换 (transform)

font-feature-settings 属性 (CSS 字体)

索引数据库 API

基于脚本的动画的时间控制

等功能的无前缀形式。IE10 Release Preview 是最新规范的第一个公开无前缀实施。但为确保与使用 Windows 8 Consumer Preview 开发的网站和应用的兼容性,IE10 仍将继续支持这些 (IE 10 Consumer Preview 所采用的) 标准使用 Microsoft 供应商前缀 (�6�2ms�6�2/ms) 的供应商前缀形式。IE 10 Release Preview 还增加了提供 PNG 磁贴图像并指定磁贴背景颜色的功能。这可以提供更高分辨率的视觉效果,以便通过用户的固定网站磁贴更好地展现网站品牌。IE 10 RP 也新增了一些其它特性,包括从所有的模式中 (而不仅仅是 IE 10 标准模式) 均删除了旧的 DX filter, 同时可在默认情况下向网站发送“不跟踪”的信号,帮助用户保护其私人信息。此外,Chakra 的性能同样得到了优化,如浮点数操作比 IE 9 快 50%。支持了HTML5。