CSS在不同浏览器的表达

摘要: 线性渐变，包括IE6\IE7\IE8\IE9+，Safari\Chrome，FireFox，Opera的不同表达形式

线性渐变：

1、IE6\IE7：使用filter

filter:progid:DXImageTransform.Microsoft.gradient(enable=true,gradientType=0,startColorStr=#f0f0f0,endColorStr=#020202);

enable：滤镜开关，true=打开，false=关闭

gradinetType：渐变类型，1=水平渐变，0=垂直渐变

startColorStr：上端或左侧起始颜色

endColorStr：下端或右侧结束颜色

2、火狐Firefox

background-image:-moz-linear-gradient(起始点|角度，{颜色 位置}，{颜色 位置}，{颜色 位置}，....}

起始点|角度：设置起始位置或者角度，（最好不要同时写）

{颜色 位置}：填写颜色以及颜色起始位置

注意：css颜色有以下写法：

十六进制色：#ff0000 简写#f00

RGB 颜色：rgb（255,0,0）

RGBA 颜色：

RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。

alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

HSL 颜色

HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。

Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。

Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。

Lightness 同样是百分比值；0% 是黑色，100% 是白色。

HSLA 颜色

HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的：hsla(hue, sat
3ff0
uration, lightness, alpha)，其中的 alpha 参数定义不透明度。
alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

预定义/跨浏览器颜色名

3、Safari\Chrome

background-image :-webkit-gradient(radial, 40 40,10 ,60 60 ,60,from(#ff0000),color-stop(70%,#00ff00) ,to(rgba(0 ,0,0 ,0)));

background-image :-webkit-gradient(linear, 40 40, 60 60 ,from(#ff0000) ,color-stop(70% ,#0f0),to(rgba(0,0 ,0,0))) ;

background-image:-webkit-gradient（类型，{位置1 |{位置1 半径}}，{位置2 |{位置2 半径}}，{目标位置颜色}，{目标位置颜色}，..}

类型：radial（放射渐变）、linear(线性渐变）

位置1：线性渐变写，指起始位置

位置1 半径：放射渐变写，指起始位置，及半径

目标位置颜色：from(颜色）=起始颜色；to（颜色）=终止颜色；color-stop（颜色）=指定位置颜色