CSS 3新特性学习----颜色和透明度

来源：互联网发布：2k17贝克汉姆捏脸数据编辑：程序博客网时间：2024/05/21 14:53

CSS 3对颜色进行了很多扩展，不仅可以使用在CSS2中的RGB模式,十六进制模式，以及关键字模式，同时还支持RGBA，HSL和HSL模式，而且也使用CSS3来实现渐变效果。

所谓的RGBA，指的就是RED GREEN BLUE Alpha，A指的就是透明度的意思，取值范围是从0到1，值越大越不透明。

所谓的HSL，是一种工业界的颜色标准，H(Hue)指的是色调，S(Saturation)指的是饱和度，L(Lightness)指的是亮度。

通过这三个颜色通道的变化以及它们相互之间的颜色叠加就可以得到格式各样的颜色了。

div {

width:100px;height:100%;

//H取值范围是0~360,0和360都是红色，S和L的都是按百分比来取值的

background:hsla(0,100%,60%,0.5);

//单独设置一个opacity属性时，不论是元素的背景，还是元素自身，都会有一个透明度的效果

opacity:0.5; //在IE下这个属性并不起作用,而且IE也不支持RGBA模式,只有RGB模式起作用

//IE下想要实现透明度，必须通过ilter属性才能完成

ilter:Alpha(opacity=50);

}

接下来要说的是如何在浏览器中实现渐变的效果:

渐变效果分为两种:线形渐变和径向渐变:

对于Webkit核心的浏览器:

可以使用-webkit-gradient(type,start_point,end_point,color-stop...)来实现线形渐变效果

type 渐变类型:linear(线性渐变)|radial(径向渐变)

start_point:分别对应x,y方向渐变的起始位置

end_point:分别对应x,y方向渐变的终止位置

第四/五/N个参数:设置渐变的位置及颜色(位置的取值从0-1):

div {

width:200px;height:200px;

//0~0.2间的颜色会使用与红色相近的颜色来填充,0.8~1间的颜色会使用与绿色相近的颜色来填充

// 当然我们也可以使用from和to属性来指定起始位置和终止位置的填充颜色

background:-webkit-gradient(linear,0 0,100% 100%,from(#000),to(#fff),color-stop(0.2,red),color-stop(0.5,blue),color-stop(0.8,green));

}

在火狐浏览器中，要实现线性渐变的效果，需要使用-moz-linear-gradient(start_point(渐变的起始位置) degree(渐变的角度),color(渐变的颜色,一般采用RGB模式) color-stop(渐变的停靠位置),...);

在以webkit为核心的浏览器上实现径向渐变效果:

-webkit-gradient(radial,100 100,0,100 100,100,color-stop(0.2,red),from(#000),to(#fff),color-stop(0.5,blue),color-stop(0.8,green));

在以mozila为核心的浏览器上实现径向渐变效果:

//以下属性中的参数分别用来设置渐变的起始位置，渐变的角度，渐变的形状以及渐变的范围，渐变的步长

-moz-radial-gradient([<point>||<angle>,]?[<shape>||<size>,]? <stop>,<stop>[,<stop>]*);

<point>:定义渐变的起始点和结束点坐标，可以是数值，百分比和关键字

<angle>:定义渐变的角度，单位包括deg(度),grad(梯度),rad(弧度)

<shape>:定义径向渐变的形状,包括circle和eclipse

<size>:定义圆半径,或者椭圆轴长度，包括多个关键字,closest-side,closest-comer,farthest-side,farthest-corner ,contain,cover

<stop>:定义步长，用的时候第一个参数设置颜色，第二个参数设置颜色的位置，可以是百分比或者数值，

例子:

background:-moz-radial-gradient(circle closest-side,rgb(255,0,0) 14%,rgb(255,255,0) 50%,rgb(0,0,255) 100%);

而IE浏览器有其特有的方式来实现渐变的效果:

filter:progid:DKImageTransform.Microsoft.Gradient(gradientType=0(0表示垂直渐变，1表示水平渐变),startColorStr = #9999ff（前两位代表透明度，取值范围为00到ff之间，后、6位代表的是渐变的颜色）,endColorStr=#fff000);

只有在webkit为核心的浏览器上才能实现文字颜色渐变效果：

-webkit-gradient(linear,0 0,0 bottom,from(red),to(green));

-webkit-background-clip:text;

-webkit-text-fill-color:rgba(0,0,0,0);

通过以上的方式就可以实现渐变的文字效果，这样做对移动端是相当友好的。

0 0