染色效果，為一幅灰度（或是被轉換為灰度模式的彩色）新增染色效果，可以為不同風格的額**帶來視覺上的一致性。
sepia()，降低飽和度的橙黃色染色效果，幾乎畫素的色相值會被收斂到35~40.
使用saturate()濾鏡可以給畫素提公升飽和度，具體飽和度取決於實際情況。
hue-rotate濾鏡可以為每個畫素的色相以指定度數進行偏移。
上述**的作用效果是：
混合模式控制了上層元素的顏色與下層顏色進行混合的方式，用它來實現染色效果，需要用到的混合模式是luminosity
，這種luminosity混合模式會保留上層元素的hsl高度資訊，並從它的下層吸取色相飽和度資訊。把下層元素設定成我們想要的主色調，而把待處理的放在上層並設定成這種混合模式，本質上就是在染色。
如果要對乙個元素設定混合模式，有兩個屬性可以發揮作用：min-blend-mode可以為整個元素設定混合模式，background-blend-mode可以為每層背景單獨設定混合模式。
有兩種方式可以處理我們的：
第一種選擇，把需要處理的包裹進乙個容器中，並把容器的背景色設定成我們想要的主色調。
第二種選擇，不用元素，而是用元素，把這個元素第一層背景設定成要染色的，並把第二層背景設定我們想要的主色調。
針對第一種情況，假如這個是個超連結，那麼它會被包裹進元素中，為元素的背景顏色設定成主色調顏色，在為使用混合模式就能得到染色的效果。
我們如果想要給混合模式的設定乙個從單色樣式變化到彩色樣式的css過渡效果，可以考慮使用background-blend-mode為設定混合模式後，先讓過渡前的與我們想要的主色調的顏色混合，再讓過渡後的與透明色混合，以此形成乙個過渡效果。
需要注意的是這種方式不夠理想，大小會被寫死，語義上這個元素不是，不會被讀屏器讀出來。
《css揭秘》筆記（九），切角效果
假設我們只需要乙個角被切掉的效果，以右下角為例。漸變可以接受乙個角度 45deg 作為方向，而且色標的位置資訊可以是絕對的長度值。因而我們可以用乙個線性漸變就能完成右下角被切掉的效果，只需要把乙個透明色標放在切角處。現在我們想要兩個角被切掉的效果，以底部的兩個角為例，只用一層漸變是不夠的，還需要再加...
CSS揭秘 視覺效果
1.單側投影 由box shadow的第四個長度引數即擴張半徑，可根據你指定的值去擴大或 當指定負值時 縮小投影的尺寸。可知單側投影實現如下 2.不規則投影 drop shadow 濾鏡可接受的引數基本上跟box shadow屬性是一樣的，但不包括擴張半徑，不包括inset關鍵字，也不支援逗號分割的...
《CSS揭秘》筆記（一）
我們在現代 css 中所面臨的挑戰已經不在於如何繞過這些轉瞬即逝的瀏覽器 bug。如今的挑戰是，在保證 dry 可維護 靈活性 輕量級並且盡可能符合標準的前提下，把我們手中的這些css特性轉化為網頁中的各種創意。這正是這本書將要呈現的內容。引用自前言 dry 是 don t repeat yours...