色彩基本3要素

色彩分成 3 要素
1. 色相  2.明度  3.彩度

色相 
就是 我們一般說，眼睛看到的這是什麼顏色的時候
也就是紅橙黃綠藍靛紫咖啡... 這些顏色的名稱

明度
色彩的明暗程度
一個顏色加上白色明度越高
加上黑色明度越低

彩度
色彩的鮮豔程度、飽和程度，
色彩越純粹愈飽和，除非你加上白、黑、灰或其他色彩，就會降低彩度
調配水彩時也可以加上水降低彩度。
以味覺比較視覺... 像是在外面賣的濃湯，有的店家參了許多水，喝了就覺得好淡，
而有的則會讓你覺得很濃郁的這種感覺。


PHOTOSHOP 裡選色器的 HSB 模型來看

H.色相

PS 裡的色相條，皆以紅為開始紅為最後

S.飽和度

PS 裡的飽和度條狀最上面是純色( S：100% )，最下面則是白色( S：0% )

B.亮度

PS 裡的亮度條狀最上面是純色( B：100% )，最下面則是黑色( B：0% )

IE11 下 多1px 問題

用 CSS 寫一個付款步驟麵包屑
這個麵包屑下以 li 加上 before 和 after 做成指標的形狀：



IE11 中瀏覽時居然 !!!

看到沒

一個白色間隙~~
1px !  

問題在於  li 內下了個 border-radius: 5px 0 0 5px;
這是個在 IE11 才出現的 BUG ~~

於是加了支 IE11 HACK， 讓它移 1 px
 *::-ms-backdrop, .pay-step li:after { right: -27px; } /* IE11 */

問題解決 ~~

CSS HACK - 區分IE 各版本寫法

.color{ _color:green;}  ( IE6 (含 IE6 ) 以下)

.color{ *color:gray; }  ( IE7 ( 含 IE7 )以下)

.color { color:green \0; } ( IE8 + )

.color { color:green \ ; }   ( IE8 . IE9 )

:root .color { color:green \0; } ( IE9 + )

.color { color:green \9\0; }   ( IE9+ )

.color { color:green \9; }   ( IE10 ( 含 IE10 ) 以下 )

*::-ms-backdrop, .color{ color:red; }   ( IE11 )

選擇器前加前綴：

* html .color { color: red; } (IE6 ONLY )

*+html .color { color: red; } ( IE7 ONLY )

@media screen\9 { 

.color { color: black; } 

}  ( IE6 . IE7 )


@media \0screen {

 .color { color: black; } 

}  ( IE8 ONLY )


@media \0screen, screen\9 {

 .color { color: black; } 

} ( IE6 . IE7 . IE8 )


@media screen\0 {

 .color { color: black; } 

}  ( IE8 . IE9 . IE10 )
@media screen and (min-width: 0\0) {

 .color { color: black; }

}  ( IE9 . IE10 )


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

.color { color: black; }

}   ( IE10 ONLY )

@media all and (-ms-high-contrast:none){
.color { color:greeny \0; }
} ( IE10 + )

@media all and (-ms-high-contrast:none){ 

*::-ms-backdrop, .color { color:green \0; }

 } ( IE11 + )