Color and Opacity
CSS3之前，樣式顏色要么是關(guān)鍵字娱挨，要么是十六進(jìn)制邦危，要么是 rgb()函數(shù)。
opacity property
此屬性用來設(shè)置元素的透明度毡熏，值在0.0到1.0之間爱只，默認(rèn)值是1.0，0.0代表完全透明招刹，1.0代表完全不透明恬试。
E { opacity: number; }
opacity 不僅影響設(shè)置了此屬性的元素，還影響其子元素疯暑。如果元素設(shè)置了opacity:0.6训柴，那么子元素也會有同樣的透明度，而且子元素的透明度只能再被設(shè)置為低與0.6妇拯，不能設(shè)置為高于0.6幻馁，即使設(shè)置了也不會有效果。
換句話說越锈，無法設(shè)置讓一個元素的透明度比其父元素更大仗嗦，或是說無法讓一個元素比其父元素更加不透明，只能是更加透明或是等于其父元素的透明度甘凭。
New and Extended Color Values
Alpha channel
顏色函數(shù)rgba()稀拐，分別是Red, Green, Blue, Alpha。
E { color: rgba(red, green, blue, alpha); }
alpha 的值和opacity屬性一樣丹弱，從0.0到1.0德撬，0.0代表完全透明，1.0代表完全不透明躲胳。
rgba() 與 opacity 的區(qū)別：
-
rgba()是個顏色值蜓洪，所以無法通過他來改變一張圖片或是一個有背景圖片的元素的透明度。 - 同
opacity一樣坯苹，子元素會繼承父元素設(shè)置的rgba()值 隆檀，但是子元素可以完全重寫其rgba()值，不像opacity粹湃，子元素只能往小(透明)的方向重寫恐仑。
所有設(shè)置顏色的地方都可以用rgba()：
.shadow .text { box-shadow: 10px 10px 4px rgba(0,0,0,0.7); }
.border .text { border: 10px solid rgba(0,0,0,0.5); }
.text-semi p { color: rgba(0,0,0,0.6); }
.text-shadow p { text-shadow: 5px 5px 1px rgba(0,0,0,0.6); }
Hue, Saturation, Lightness
hsl() color function，HSL即是代表色調(diào)再芋，飽和度菊霜，亮度三個通道的顏色。
E { color: hsl(hue,saturation,lightness); }
hue 的值為0到360济赎，saturation 和 lightness 的值為0%到100%鉴逞。
| HSL | RGB | Hexadecimal | Keyword |
|---|---|---|---|
| 0,0%,0% | 0,0,0 | #000000 | black |
| 360,0%,100% | 255,255,255 | #FFFFFF | white |
| 0,100%,50% | 255,0,0 | #FF0000 | red |
| 120,100%,25% | 0,128,0 | #008000 | green |
| 240,100%,50% | 0,0,255 | #0000FF | blue |
相對rgba()记某，也有個hsla()，增加了alpha通道构捡。
E { color: hsl(hue,saturation,lightness,alpha); }
Color Variable: currentColor
顏色變量currentColor液南，代表當(dāng)前元素的color屬性值。
<h2>H2 (<abbr>此元素的任何顏色值若使用與父元素相同的顏色勾徽，可以使用currentColor變量</abbr>)</h2>
<h2 class="ccolor">H2 (<abbr>此元素的任何顏色值若使用與父元素相同的顏色滑凉，可以使用currentColor變量</abbr>)</h2>
h2 {
color: black;
padding: 10px;
width: -webkit-max-content;
}
h2.ccolor {
background-color: black;
color: yellow;
}
h2 abbr { border-bottom: 6px double currentColor; }
此文是對《The Book of CSS3 2nd edition》第10章的翻譯和歸納，方便以后查閱喘帚。
感謝其作者Peter Gasston !
