實際 Web 開發過程中，總會遇到各種各樣的布局，比如下面的各種“優惠券”，一起來看看吧

一、最佳實現方式

首先，碰到這類布局的最佳實現肯定是 mask遮罩 。關于遮罩，可以看一下 CSS3 Mask 安利報告 。這里簡單介紹一下

基本語法很簡單，和 background 的語法基本一致

.content{
  -webkit-mask: '遮罩圖片' ;
}


/*完整語法*/
.content{
  -webkit-mask: '遮罩圖片' [position] / [size] ;
}

這里的遮罩圖片和背景的使用方式基本一致，可以是PNG圖片、SVG圖片、也可以是漸變繪制的圖片，同時也支持多圖片疊加。

遮罩的原理很簡單，最終效果只顯示不透明的部分，透明部分將不可見，半透明類推

事實上，除了根據透明度（Alpha）來作為遮罩條件，還可以通過亮度（luminance）來決定，比如白色表示隱藏，黑色表示可見。不過目前只有 Firefox 支持

所以，只要能繪制以上各種形狀，就可以實現了。

二、內凹圓角

優惠券大多有一個很明顯的特點，就是內凹圓角。提到圓角，很容易想到 radial-gradient 。這個語法有點復雜，記不住沒關系，可以看看張老師的這篇 10個demo示例學會CSS3 radial-gradient徑向漸變 。

.content{
  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); 
}

這樣就繪制了一個半徑為 20px 的透明的圓，不過代碼層面還有很多優化的空間。

1. 在實現邊界分明的漸變時，后面顏色的位置只需要小于等于前面顏色的位置就行了，比如 0
2. 透明顏色可以用16進制 縮寫比如#0000 來代替， 不透明的部分隨便用一個顏色就好，我喜歡用 red，主要是這個單詞比較短
3. 還有漸變的位置默認是居中的，所以第二個center可以去除，left 可以用 0 來表示

進一步簡化就得到了

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); 
}

不錯，又少了好幾個B的流量~ 可以查看在線實例 codepen 優惠券實現1

三、優惠券效果

上面是一個最基本的內凹圓角效果，現在來實現下面幾種布局，比如兩個半圓的，根據上面的例子，再復制一個圓不就可以了？改一下定位的方向

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
}

這時發現一個圓都沒有了。原因其實很簡單，如下演示，兩層背景相互疊加，導致整塊背景都成了不透明的，所以 mask 效果表現為全部可見。

解決方式有2個，分別是：

1. 把兩個凹角的地方錯開，這里可以通過修改尺寸和位置，同時還需要禁止平鋪

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-size: 51%; /*避免出現縫隙*/
  -webkit-mask-position: 0, 100%; /*一個居左一個居右*/
  -webkit-mask-repeat: no-repeat;
}

動態演示如下，這樣就不會互相覆蓋了

可以查看在線實例 codepen 優惠券實現2

2. 使用遮罩合成 mask-composite ，這個可能不太熟悉，簡單介紹一下

標準屬性下 mask-composite 有 4 個屬性值（Firefox支持）

/* Keyword values */
mask-composite: add; /* 疊加（默認） */
mask-composite: subtract; /* 減去，排除掉上層的區域 */
mask-composite: intersect; /* 相交，只顯示重合的地方 */
mask-composite: exclude; /* 排除，只顯示不重合的地方 */

這個可能有些不好理解，其實可以參考一些圖形軟件的形狀合成操作，比如 photoshop

-webkit-mask-composite 與標準下的值有所不同，屬性值非常多，看下面

-webkit-mask-composite: clear; /*清除，不顯示任何遮罩*/
-webkit-mask-composite: copy; /*只顯示上方遮罩，不顯示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只顯示重合的地方*/
-webkit-mask-composite: source-out; /*只顯示上方遮罩，重合的地方不顯示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只顯示重合的地方*/
-webkit-mask-composite: destination-out;/*只顯示下方遮罩，重合的地方不顯示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只顯示不重合的地方*/

是不是一下就懵了？不用慌，可以看到上面有幾個值是 source-*，還有幾個是 destination-*開頭的，source 代表新內容，也就是上面繪制的圖層， destination 代表元內容，也就是下面繪制的圖層（在CSS中，前面的圖層會覆蓋后面的圖層），這里的屬性值其實是借用了Canvas 中的概念，具體可以查看 CanvasRenderingContext2D.globalComposite

記不住沒關系，實際開發可以逐一試驗[捂臉]。具體差異可以查看 codepen -webkit-mask-composite 屬性值演示

了解這個屬性后，上面的疊加問題就很簡單了，設置只顯示重合的地方就行了

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

動態演示如下，這樣只會顯示互相重合的地方

可以查看在線實例 codepen 優惠券實現3

2個圓角的實現了，4個的就很容易了，畫4個圓就行，同樣利用遮罩合成可以輕易實現

content{
  -webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /*4個角落各放一個圓*/
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

可以查看在線實例 codepen 優惠券實現4

四、優惠券平鋪效果

上面的例子展示了2個圓角和4個圓角的效果，分別繪制了2個和4個圓，其實這是可以通過平鋪來實現的，只需要一個圓就可以。實現步驟如下

1. 畫一個左中的靠邊的透明圓

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}

2. 向左平移自身的一半

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px
}


/*也可以縮寫為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 
}

效果就出來了，是不是很神奇？其實就是利用到了默認的 repeat特性，這里用一張動圖就能明白了

下面紅色邊框內表示視區范圍，也就是最終的效果，這里為了演示，把視線之外的平鋪做了半透明處理，移動表示 position 改變的過程

可以查看在線實例 codepen 優惠券實現5

同樣原理，4個圓角也可以采用這種方式實現

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
}


/*也可以縮寫為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

實現原理演示如下

可以查看在線實例 codepen 優惠券實現6

6個圓角就需要改一下平鋪尺寸了。

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}


/*也可以縮寫為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

實現原理演示如下

可以查看在線實例 codepen 優惠券實現7

如果繼續縮小背景圖的尺寸，還可以得到最后的效果

.content{
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}


/*也可以縮寫為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}

實現原理演示如下，其實就平鋪

可以查看在線實例 codepen 優惠券實現8

五、反向鏤空疊加

有些情況下可能單一的一層漸變繪制不了很復雜的圖形，這就需要用到反向鏤空技術了，其實就是上面提到過的遮罩合成 ，這里再運用一下

1. 先把上面的實現拿過來

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

2. 直接在這個基礎上打一排小洞

.content{
  -webkit-mask: radial-gradient( circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

注意這里用到了 -webkit-mask-composite: destination-out，表示減去，只顯示下方遮罩，重合的地方不顯示

可以查看在線實例 codepen 優惠券實現9

也可以放在兩邊，改一下 position 就可以了

.content{
  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

可以查看在線實例 codepen 優惠券實現10

六、邊框遮罩

有些同學覺得徑向漸變太復雜，實在是寫不出來，能不能用圖片代替呢？其實也是可行的。這里說的邊框遮罩指的是 mask-border , 目前還在 W3C 草案當中，不過有一個替代屬性 -webkit-mask-box-image

語法和概念和 border-image 非常相似，關于 border-image 可參考這篇文章 border-image 的正確用法，這里主要了解一下用法和效果

.content{
  -webkit-mask-box-image: '遮罩圖片' [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
}

比如有一張這樣的圖片

SVG代碼長這樣，很多工具都可以導出來，實在不會可以直接找設計同學

<svg xmlns="http://www.w3.org/2000/svg" width="60.031" height="60.031" viewBox="0 0 60.031 60.031"><path d="M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z" fill-rule="evenodd"/></svg>

這里需要轉義一下，可借助張老師的 SVG在線合并工具

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  /*這里的20表示四周保留20像素的固定區域，剩余部分平鋪或者拉伸*/
}

然后就實現了這樣一個形狀，同樣是自適應的

可以查看在線實例 codepen -webkit-mask-box-iamge 實現1

再比如有一張這樣的圖片

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M55.186 30.158a4.965 4.965 0 0 0 4.841 4.959V40A20.063 20.063 0 0 0 40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0v-4.888c.054 0 .1.016.158.016a4.973 4.973 0 1 0 0-9.945c-.054 0-.1.014-.158.015v-5.074h.065A20.066 20.066 0 0 0 20.131.058v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064v5.07a4.965 4.965 0 0 0-4.841 4.966z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
}

可以得到這樣一個形狀，兩側的半圓被拉伸了

這時只需要設置平鋪方式 -webkit-mask-box-image-repeat , 這個和 border-image-repeat 是一樣的概念，有以下 4 個值

-webkit-mask-box-image-repeat: stretch; /*拉伸(默認)，不會平鋪*/
-webkit-mask-box-image-repeat: repeat; /*重復*/
-webkit-mask-box-image-repeat: round; /*重復，當不能整數次平鋪時，根據情況拉伸。*/
-webkit-mask-box-image-repeat: space; /*重復，當不能整數次平鋪時，會用空白間隙填充*/

幾種平鋪方式的差異如下

這里我們可以采用 round 或者 repeat

.content{
  -webkit-mask-box-image: url("...") 20;
  -webkit-mask-box-image-repeat: round;
}

可以查看在線實例 codepen -webkit-mask-box-iamge 實現2

七、總結和說明

以上一共介紹了12種繪制優惠券的案例，應該可以解決掉絕大部分這類布局的問題，這里總結以下幾點

1. CSS mask 一定是這類布局最完美的實現方式
2. 需要 CSS radial-gradient 繪制圖形的技巧
3. 盡可能采用 repeat 來重復相同的元素
4. 多種形狀疊加時需要靈活運用 mask-composite
5. 也可以采用圖片來代替CSS漸變，需要使用 mask-border

關于兼容性，其實不考慮 IE 都沒有什么大問題，最后的 mask-border 目前只兼容 chrome 內核，移動端可放心使用

感謝閱讀，希望能對日后的工作有所啟發。