1 顏色相關樣式

CSS3中增加了3種顏色值——RGBA 顏色值、HSL顏色值、HSLA顏色值，並且允許通過對RGBA顏色值和HSLA顏色值設定alpha通道的方法來更加容易地實現將半透明文字與影象互相重疊的效果。

• 對RGB顏色設定alpha通道

在CSS3中，可以通過對RGB顏色設定alpha通道的方法來定義RGBA顏色。

（1）RGBA顏色

是指利用紅色值（R）、綠色值 （G）、藍色值（B）、alpha通道值（A）來定義的顏色。2

（2）alpha通道值的範圍為0~1.0, 0表示完全透明，1表示不透明。

background-color：rgba（255,0,0,0.5）；

（3）瀏覽器支援

到目前為止：Safari、Chrome 、Firefox、Opera支援RGBA顏色。 

（在諸如IE等不支援的瀏覽器中，將忽視對RGBA顏色值的指定）

• 對HSL顏色設定alpha通道

（1） HSL顏色使用色調（H）、飽和度（S）、亮度（L）來定義顏色。

（2）色調值中用0或360表示紅色，120表示綠色，240表示藍色，當取值大於360時，實際的值等於該值除以360之後的餘數。

（3）飽和度和亮度的取值範圍均為0%到100%。

（4）HSLA顏色

可以通過對HSL顏色設定alpha通道的方法來定義HSLA顏色。

使用色調（H）、飽和度（S）、亮度（L）、alpha通道值（A）來定義顏色

color：hsl（0，100%，100%）；

color：hsla（0，100%，100%,0.5）；

（5）瀏覽器支援

到目前為止：Chrome 、Firefox、Opera等瀏覽器支援HSL顏色和HSLA顏色。 

• alpha通道與opacity屬性的區別

（1）支援opacity屬性的瀏覽器

到目前為止：Safari、Chrome 、Firefox、Opera。

（2）opacity屬性

取值範圍：0~1,0表示完全透明、1表示不透明。

（3）區別

使用alpha通道對元素設定透明度時，可以單獨針對元素的背景色和文字顏色等指定透明度，而opacity屬性只能指定整個元素的透明度。

div{

background-color：rgba（0,255,100，0.5）；//背景色

color：rgba(255，255，255，0)；//文字顏色

opacity：0.5；//  整個元素

}

• 指定顏色值為transparent

如果將顏色值指定為transparent，則會將背景、文字或邊框等的顏色設定為完全透明，相當於使用了值為0的alpha通道。

（1）指定

CSS1：只能在background-color屬性中指定該值

CSS2：可以在background-color、border-color屬性中指定該值

CSS3：可以在一切指定顏色值得屬性中指定該值

（2）瀏覽器支援

到目前為止：Chrome 、Firefox、Opera、Safari等瀏覽器支援。（IE支援不完全）

background-color：transparent；

border-color：transparent；

color：transparent；

2 使用者介面相關樣式

• outline屬性

（1）CSS2中定義。

（2）功能

用來在元素周圍繪製一條輪廓線，可以起到突出元素的作用。

（3）使用

outline：outline-color outline-style outline-width（顏色、樣式、寬度）

• outline-offset屬性

在預設情況下，對帶有邊框的元素來說，使用outline屬性將緊貼著邊框外圍繪製一條輪廓線。

（1）功能

讓輪廓線向外偏離幾個畫素。（可繪製雙邊框）

（2）CSS3中定義

outline-offset：2px；

（3）可為負值，向內偏移。

• resize屬性

（1）功能

允許使用者通過拖動的方式來修改元素的尺寸。到目前為止，主要用於可以使用overflow屬性的任何容器中。

（2）瀏覽器支援

在目前為止。Firefox、Safari、Chorme支援該屬性。

（3）屬性值

none：使用者不能修改元素的尺寸。

both：使用者可以修改元素的寬度和高度。

horizontal：使用者可以修改元素的寬度，不能修改元素的高度。

vertical：使用者可以修改元素的高度，不能修改元素的寬度。

inherit：繼承父元素的resize屬性值。

• initial屬性值

（1）功能

取消對元素的樣式操作，讓各屬性值使用預設值。

{

color:-moz-initial;

color:initial;

}

（2）個別情況下，對元素使用initial屬性值後的顯示結果並不等於將該元素的樣式設定直接刪除後的結果。如h1。（不考慮瀏覽器對h1元素追加了什麼樣式，使用CSS中對字號和字型粗細屬性設定的預設值）。