【深圳】DJI 大疆創新 網際網路團隊 前端及大量職位招聘中 (內推 15-50k + 豐厚年終 + 股份)簡歷請發至 evan.zhou@dji.com，合適的話當天回覆，當天內推。 更多福利
這篇文章分享我最近遇到的需求和解決過程中遇到的問題，以及學到新知識。釋出於w3ctrain
學習之前可以先看看酷炫的動畫效果，想想怎麼實現。
從最近在做的需求說起，一個優惠券樣式，過設計稿的時候認為沒什麼大不了的，滿口答應了。真正開始開發的時候遇到問題，主要是鏤空效果實現方式上比較費勁。要求是背景可配，並且票身可以配背景圖，然後鏤空是真鏤空。
設想並嘗試了很多種方案，偽類模擬，背景貼圖，Canvas 繪製，沒有一個能讓我滿意。前端就是這麼難，即使跪下來求設計師妹紙改稿，也沒能得到同情，不僅如此，還被甩一臉，你看看，人家滴滴就能做。
我們不一樣！！！
沒辦法，現在的痛都是當初腦子進的 shi，沒有商量的餘地，幹！搜尋 ticket 關鍵字，我在 Codepen 上找到類似的效果。
See the Pen CSS Concert ticket purchase by Helkyle (@HelKyle) on CodePen.
看到鏤空，漸變，我堅信找到最終解了。看原始碼，贊！分三段拼接絕對是個好主意！
然鵝！我們的需求是，優惠券整塊背景漸變，分成三段那麼漸變也得相應地拆成三段寫，不能接受。
想起來 ClipPath 貌似可以用來裁切內容。搜到以前在 CSS Tricks 上看過的文章，為效果讚歎不已（你可以在clippy上調教 clip-path）。從 文件上看，用在這個場景也同樣不合適。鏤空部分並不是既不是規則圖形，更不是一個整體，放棄。
CSS Mask 屬性
和 Sketch 裡面的 Mask 一樣，CSS Mask 可以讓蒙版區域區域透過去，不透明區域保留顯示出來。
用法和 background 基本一致，學習零成本。比如 mask-image, mask-origin, mask-position, mask-repeat, mask-size 都和 background 一致。因為過於簡單，不在這裡囉嗦，更多用法還是看文件 或者 張鑫旭-CSS遮罩CSS3 mask/masks詳細介紹，
使用 mask 最終我的需求實現效果是這樣的：
See the Pen Using Mask To Create Ticket Hollow Effect. by Helkyle (@HelKyle) on CodePen.
思考半天的需求，切一張圖，寫一行核心程式碼就解決了。關鍵點足夠簡單！好用！隨隨便便都能做出很酷炫的效果。
See the Pen Mask Effect - DJI by Helkyle (@HelKyle) on CodePen.
值得一提，mask 支援 svg, png 還可以用 gif，比如 Codepen 有人做了個海綿寶寶動畫。
See the Pen #CodePenChallenge - Animated css mask-image by Tony Banik (@tonybanik) on CodePen.
核心程式碼只有一行, 用了一張海綿寶寶 gif。沒有 mask 屬性，真不知道怎麼下手。
img {
mask-image: url(https://user-gold-cdn.xitu.io/2018/10/18/1668599f2b92301d?w=500&h=295&f=gif&s=296531);
}
複製程式碼
等等，那相容性怎麼樣？
相容性
從 CanIUse 上看，當前 mask 相容性達到 83.15%（大部分需要加上 -webkit- 字首），IE && Edge 完全不支援。對於部分不支援的瀏覽器，還可以使用 Feature Query 進行相容。
@supports not (mask-size: cover) {
// 不支援的樣式
}
複製程式碼毒雞湯時刻
前端技術更新迭代速度特別快，很多幾年前還是實驗性的屬性，轉眼已經到了收成的時候。這就體現平時多積累新知識的重要性，比如 grid，houdini，剛接觸短期內看不到收成，需要用到的時候想起來有這麼個東西，恰好相容性也跟上來，在別人看來你就很優秀。雲淡風輕地說上一句：
沒啥，只是因為在人群中多看了一眼。
相關文章
- Clipping and Masking in CSS
- Using CSS Clip Path to Create Interactive Effects
- CSS Masking
- CSS遮罩CSS3 mask/masks詳細介紹
Changelog
fix: 事實上設計師很好說話，沒有刁難我。
部分風景圖片來自skypixel