要什麼 Photoshop，會這些 CSS 就夠了

標題黨一時爽，一直標題黨一直爽

 

還在上大學那會兒，我就喜歡玩 Photoshop。後來寫網頁的時候，因爲本身太菜，好多花裏胡哨的效果都得藉助 Photoshop 實現，當時就特別但願 CSS 能像 Photoshop 同樣處理圖片。

隨着對 CSS 的瞭解越多，我發現 CSS 有不少平時用得少（或者不會用），但很是厲害的屬性。這些屬性實現了不少 Photoshop 的功能，好比濾鏡、混合模式。

我簡單整理了一下，因爲這些屬性的功能十分強大，每個屬性都能單獨成文，因此這裏只是作一個目錄。

 

1、漸變 Gradient

漸變在 PS 裏面是一個很經常使用的功能，在工做中用到 CSS 漸變的場景也很多

但除了簡單的線性漸變、徑向漸變以外，還能夠用漸變作出這樣的效果：

甚至是用漸變作一個進度條：

 

相關文章：
《使用 CSS 漸變》

《CSS3 Gradient 漸變還能這麼玩》

 

 

2、倒影 box-reflect

這個屬性能夠使某個 DOM 元素產生一個倒影，而且能夠規定倒影的方向和距離

另外還能夠給這個倒影添加一個遮罩，好比一個透明漸變：

-webkit-box-reflect: below -7px linear-gradient(to bottom,transparent,rgba(0,0,0, 0.4));

 

相關文章：

《-webkit-box-reflect》

《CSS 倒影》

 

 

3、陰影 box-shadow / text-shadow

又是一個很常見的屬性，但一般都是用來作一些簡單的陰影，好比：

但結合 animation 與 transform，就能夠作出這樣的動畫：

CodePen Demo -- CSS Checker Illusion( By David Khourshid )

 

相關文章：

《box-shadow》

《你所不知道的 CSS 陰影技巧與細節》

 

 

4、 裁剪 clip-path

這個屬性能夠建立一個裁剪區域，讓元素只顯示區域內的內容，有點像 Photoshop 中「路徑+蒙版」的效果

這個屬性值最強大的地方在於，能夠很是自由的繪製多邊形：

 

 

相關文章：

《clip-path》

《CSS clip-path maker》

《難以想象的CSS之CLIP-PATH》

 

 

5、蒙板 mask

蒙板的效果是在原圖形上面，在蒙上一層圖形，獲得一個新的圖形

因爲蒙板圖形能夠是透明的，因此有些用 clip-path 實現的效果，也能夠用 mask 實現

在我看來，mask 和 background 是高度相似的，區別在於 background 位於底層，而 mask 在頂層

 

相關文章：

《CSS遮罩CSS3 mask/masks詳細介紹》

《CSS3蒙版》

《CSS3 的一對孿生兄弟之 background & mask》

 

 

6、濾鏡 filter

濾鏡應該也算比較經常使用的屬性了，同一張圖疊加不一樣的濾鏡以後，能呈現各類各樣的效果：

但這只是基本用法！

filter 能夠作出不少漂亮的效果，特別是結合 animation 以後，這些高級技巧能夠參考下面的「相關文章」，看完以後我都驚呆了

 

相關文章：

《filter》

《你所不知道的 CSS 濾鏡技巧與細節》

《QQ 未讀消息的拖拽動態效果是如何實現的？ - 祥子的回答 - 知乎》

《從酷炫的果凍菜單談起 CSS3 filter 屬性》

 

 

7、混合模式 blend-mode

若是對 Photoshop 的混合模式很熟悉的話，這個屬性也很是好理解

在 CSS 裏面，有 mix-blend-mode 和 background-blend-mode 兩種用法

呈現的效果和上面的 filter 相似，也是讓原圖形疊加以後產生化學反應，好比用 CSS 作一個抖音的 LOGO：

CodePen Demo -- 使用 mix-blend-mode 實現抖音 LOGO

 

相關文章：

《混合模式》

《mix-blend-mode的使用》

《探究 CSS 混合模式\濾鏡致使 CSS 3D 失效問題》