在CSS3中可以使用RGBA和HSLA兩種色彩模式，這兩個都可以用來設置顏色以及指定透明度。

rgba指的是：紅色、綠色、藍色、Alpha透明度（Red-Green-Blue-Alpha）前三個值取值從0~255或0%~100%

hsla指定是：色調、飽和度、亮色、Alpha透明度（Hue-Saturation-Light-Alpha）

色調取值0~360,飽和度和亮度取值0%~100%其中,Alpha的取值從0~1,0代表完全透明,1代表完全不透明

從上面可以看出hsla要比rgba稍微高大上一些

拿邊框來舉個栗子：

使用rgba方式：

border: 10px solid rgba(255,255,255,.5); 
 

rgba分別對應紅綠藍和透明值，其中rgb區間為0（純黑）至255（純色）透明度a區間為0（完全透明）至1不透明

使用hsla方式：

background: white; 
border: 10px solid hsla(0, 0%, 100%, .5); 
background-clip: padding-box; 

默認情況下，背景的顏色會延伸至邊框下層，在css3中，我們可以通過設置background-clip:padding-box來改變背景的默認行為，從而達到我們更想要的效果

結論：

RGBA無法直觀看出是什麽顏色。並且如果想要對顏色進行調整也無法簡單做到

HSLA只要將色調值設為一個特定值就可以方便地調整其亮度和飽和度

css顏色模式hsla和rgba