css3新的顏色表示課件

1、CSS3的新增顏色方式主講：叢浩LAMP兄弟連叢浩第1頁，共19頁。本章內容CSS1&2顏色表示方式(W3C標準)CSS3 新增顏色表示方式CSS3 顏色使用實例模擬漸變效果網(wǎng)頁配色表圖片查看器效果演示第2頁，共19頁。CSS1&CSS2的顏色方式Color name 顏色名稱方式HEX方式十六進制方式RGB方式三原色配色方式第3頁，共19頁。Color Name方式用顏色關鍵字表示對應的顏色。例如:red(紅色)、blue(藍色)、pink(粉色)優(yōu)點：方便快捷而且特定顏色比較準確缺點：英文記憶很是個問題表示顏色數(shù)量有限。不支持透明顏色.第4頁，共19頁。HEX方式十六進制記法 ，使用十六進

2、制表示顏色語法:#RRGGBB 或 #RGB取值：RR： 紅色值。十六進制正整數(shù) GG： 綠色值。十六進制正整數(shù) BB： 藍色值。十六進制正整數(shù) 取值范圍:00-FF第5頁，共19頁。 例如:#FF0000紅色 #FFFF00 黃色。優(yōu)點：表示顏色種類多，使用較方便缺點：16進制單位換算很成問題不支持透明顏色。特定顏色需要工具配合或者一定的顏色調配知識第6頁，共19頁。RGB方式RGB記法。語法:RGB(R,G,B)取值：R： 紅色值。正整數(shù) | 百分數(shù)G： 綠色值。正整數(shù) | 百分數(shù) B： 藍色值。正整數(shù) | 百分數(shù) 取值范圍:0255或者0%100%第7頁，共19頁。 例如:rgb(255

3、,0,0)紅色 rgb(255,255,0)黃色優(yōu)點：表示顏色種類多，使用較方便缺點：不支持透明顏色特定顏色需要工具配合或者一定的顏色調配知識第8頁，共19頁。CSS3 新增顏色表示方式RGBA模式HSL模式HSLA模式第9頁，共19頁。RGBA模式RGBA記法。此色彩模式與RGB相同，只是在RGB模式上新增了Alpha透明度。語法：RGBA(R,G,B,A)取值：R： 紅色值。正整數(shù) | 百分數(shù) G： 綠色值。正整數(shù) | 百分數(shù) B： 藍色值。正整數(shù) | 百分數(shù) A： Alpha透明度。取值01之間。 例如:rgba(255,0,0.5)半透明紅色第10頁，共19頁。HSL模式HSL記法。

4、(色輪模式)語法:HSL(H,S,L)取值：H： Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數(shù)值來指定顏色。取值為：0 - 360 S： Saturation(飽和度)。取值為：0.0% - 100.0% L： Lightness(亮度)。取值為：0.0% - 100.0% 例如:hsl(360,50%,50%) 紅色第11頁，共19頁。第12頁，共19頁。HSLA模式HSL記法。 (色輪模式)語法:HSLA(H,S,L,A)取值：H： Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數(shù)值來指定顏色。取值為：0 - 360 S： Saturation(飽和度)。取值為：0.0% - 100.0% L： Lightness(亮度)。取值為：0.0% - 100.0%A： Alpha透明度。取值01之間。 例如:hsl(360,50%,50%,0.5) 紅色第13頁，共19頁。transparent特殊顏色值,表示透明色?？梢灾苯赢斪鲱伾褂谩＠纾篶olor:transparent 設定字體顏色為透明第14頁，共19頁。Opacity屬性作用：設定元素的透明度。取值：01之間注意：對于尚不支持opacity屬性的IE瀏覽器濾鏡：filter:alpha(opacity=50) 僅限IE第