css3新的颜色表示.ppt

《css3新的颜色表示.ppt》由会员分享，可在线阅读，更多相关《css3新的颜色表示.ppt（19页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、CSS3的新增颜色方式主讲：丛浩LAMP兄弟连丛浩本章内容CSS1&2颜色表示方式(W3C标准)CSS3 新增颜色表示方式CSS3 颜色使用实例模拟渐变效果网页配色表图片查看器效果演示CSS1&CSS2的颜色方式pColor name 颜色名称方式pHEX方式十六进制方式pRGB方式三原色配色方式Color Name方式方式p用颜色关键字表示对应的颜色。n例如:red(红色)、blue(蓝色)、pink(粉色)n优点：方便快捷而且特定颜色比较准确n缺点：英文记忆很是个问题表示颜色数量有限。不支持透明颜色.HEX方式方式p十六进制记法十六进制记法，使用十六进制表示颜色n语法:#RRGGBB 或#

2、RGBn取值取值：RR：红色值。十六进制正整数 GG：绿色值。十六进制正整数 BB：蓝色值。十六进制正整数 取值范围:00-FF 例如:#FF0000红色#FFFF00 黄色。n优点：表示颜色种类多，使用较方便n缺点：16进制单位换算很成问题不支持透明颜色。特定颜色需要工具配合或者一定的颜色调配知识RGB方式pRGB记法记法。n语法语法:RGB(R,G,B)n取值：取值：R：红色值。正整数|百分数G：绿色值。正整数|百分数 B：蓝色值。正整数|百分数 取值范围:0255或者0%100%例如:rgb(255,0,0)红色 rgb(255,255,0)黄色n优点：表示颜色种类多，使用较方便n缺点：

3、不支持透明颜色特定颜色需要工具配合或者一定的颜色调配知识CSS3 新增颜色表示方式pRGBA模式pHSL模式pHSLA模式RGBA模式pRGBA记法记法。n此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。n语法：RGBA(R,G,B,A)n取值：取值：R：红色值。正整数|百分数 G：绿色值。正整数|百分数 B：蓝色值。正整数|百分数 A：Alpha透明度。取值01之间。n 例如:rgba(255,0,0.5)半透明红色HSL模式pHSL记法。记法。(色轮模式)n语法:HSL(H,S,L)n取值：H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取

4、其他数值来指定颜色。取值为：0-360 S：Saturation(饱和度)。取值为：0.0%-100.0%L：Lightness(亮度)。取值为：0.0%-100.0%n 例如:hsl(360,50%,50%)红色HSLA模式pHSL记法。记法。(色轮模式)n语法:HSLA(H,S,L,A)n取值：H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0-360 S：Saturation(饱和度)。取值为：0.0%-100.0%L：Lightness(亮度)。取值为：0.0%-100.0%A：Alpha透明度。取值01之间。n 例如:hsl(360,50%,50%,0.5)红色transparentp特殊颜色值,表示透明色。可以直接当做颜色使用。n例如：color:transparent 设定字体颜色为透明Opacity属性属性p作用：设定元素的透明度。p取值：01之间p注意：对于尚不支持对于尚不支持opacity属性的属性的IE浏览器浏览器p滤镜：filter:alpha(opacity=50)仅限IE实战操作:模拟渐变实战操作:网页配色表实战操作:图片查看器