css3新的顏色表示課件

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

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

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

4、(色輪模式)語法:HSL(H,S,L)取值：H： Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(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(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(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特殊顏色值,表示透明色?？梢灾苯赢?dāng)做顏色使用。例如：color:transparent 設(shè)定字體顏色為透明第14頁，共19頁。Opacity屬性作用：設(shè)定元素的透明度。取值：01之間注意：對于尚不支持opacity屬性的IE瀏覽器濾鏡：filter:alpha(opacity=50) 僅限IE第