CSS 實現優惠券的技巧

實際 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 的透明的圓，不過代碼層面還有很多優化的空間。

在實現邊界分明的漸變時，后面顏色的位置只需要小于等于前面顏色的位置就行了，比如 0
透明顏色可以用16進制 縮寫比如#0000 來代替，不透明的部分隨便用一個顏色就好，我喜歡用 red，主要是這個單詞比較短
還有漸變的位置默認是居中的，所以第二個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個，分別是：

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

.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

使用遮罩合成 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個圓，其實這是可以通過平鋪來實現的，只需要一個圓就可以。實現步驟如下

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

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

向左平移自身的一半

.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

五、反向鏤空疊加

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

先把上面的實現拿過來

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

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

.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種繪制優惠券的案例，應該可以解決掉絕大部分這類布局的問題，這里總結以下幾點

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

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

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

面中如果有兩種或多種指定顏色之間的平滑過渡的漸變效果，會使得我們的視覺效果瞬間提升幾個檔次，在CSS3中有提供的多個漸變方式屬性就能讓我們輕松實現這樣的漸變效果。

目前CSS漸變屬性有六個，分別為:linear-gradient(線性漸變),repeating-linear-gradient(重復線性漸變),radial-gradient(徑向漸變),repeating-radial-gradient(重復徑向漸變),conic-gradient(錐形漸變),repeating-conic-gradient(重復錐形漸變); CSS漸變屬性作用是從一種顏色平滑漸變到另一種顏色的圖像，那么background-image和border-image屬性都可以用漸變作為圖片內容。下面，我們就分別來看看這幾個屬性的效果

linear-gradient和repeating-linear-gradient

線性漸變以直線的方式，可向左、向右、向上、向下、對角方向延伸，使用頻率很高。要創建線性漸變,需要指定兩種及以上的顏值和方向，如果未指定方向，默認為上到下漸變。
使用語法:

`1`	`background-image: linear-gradient(direction, ColorStop1, ColorStop2, ...,ColorStopN);`

direction的取值有: to right（向右）、to bottom（向下）、to bottom right(向右下角)、180deg(向下)
ColorStop為指定漸變顏色和漸變位置，顏色代碼可以是十六進制顏色代碼，RGB顏色代碼。位置可以是百分比也可以是像素

  <div class="bg">
  </div>

  .bg{
  width: 200px;
	height: 200px;
	background-image: linear-gradient( rgb(123, 255, 0),rgb(119, 0, 255));
}

默認從上到下

.bg{
  width: 200px;
	height: 200px;
	background-image: linear-gradient(to bottom right, rgb(123, 255, 0),rgb(119, 0, 255));
}

指定方向從左上角到右下角

.bg{
  width: 200px;
	height: 200px;
	background-image: linear-gradient(to bottom right, rgb(123, 255, 0),rgb(119, 0, 255),rgb(255, 0, 43));
}

指定方向從左上角到右下角,設置多種漸變顏色

.bg{
  width: 200px;
	height: 200px;
	background-image: linear-gradient(to bottom right, rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43));
}

指定方向從左上角到右下角,設置多種漸變顏色及顏色作用位置

repeating-linear-gradient用得可能比較少，它是基于linear-gradient進行重復平鋪操作

.bg{
  width: 200px;
	height: 200px;
	background-image: repeating-linear-gradient(to bottom, rgb(123, 255, 0) 0 ,rgb(251, 255, 0)10%,rgb(255, 0, 43)15%);
}

前面都是漸變背景，我們再來看看漸變邊框是什么效果

.bg{
  width: 200px;
	height: 200px;
  border-width:10px;
  border-style:solid;
  border-image:linear-gradient(to bottom right, rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43)) 1 10;
}

radial-gradient

徑向漸變以由中心點由圓或者橢圓向外擴散，使用語法

`1`	`background-image: radial-gradient(shape size at position, ColorStop, ..., ColorStopN);`

shape 圓類型，就兩種：ellipse(橢圓)和circle (圓)，默認ellipse
size 漸變大小，分別有farthest-corner(從圓心到圓最遠的角為半徑),farthest-side(從圓心到圓最遠的邊為半徑),closest-corner(從圓心到圓最近的角為半徑),closest-side(從圓心到圓最近的邊為半徑),Size，默認是farthest-corner，
position 位置：left,right,top,bottom,center或者數值比分比,默認是center
ColorStop,漸變顏色和漸變位置

：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

之前《CSS之圖片特殊用法》有講過不同用途的image屬性，漸變作為image的屬性值參與以上用途。下面主要講一講漸變的實際用法。

一線性漸變（linear-gradient)

1 使用direction控制漸變方向

語法：

background-image: linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);

解釋說明：

to direction表示的是漸變的方向，可以省略不寫，若省略，則默認從上到下；direction可以是單個方向參數如top/bottom/left/right，也可以是兩個方向參數如bottom right，其表示從左上角到右下角漸變。
后面color參數至少有兩個。
length參數表示當前顏色中心線位置，百分比percentage參數也表示當前顏色中心線的位置，可以省略，若省略則按照下圖規則。

以上圖為例，五種顏色將空間均分成四等份，其中五條分割線為各自顏色的中心線，以此為基準顏色漸變。

下面給出幾個具體案例

/*方向缺省，百分比缺省，漸變從上到下，五種顏色按規則漸變*/
background-image: linear-gradient(red, yellow,blue,orange,black);
/*從左到右，按照百分比漸變*/
background-image: linear-gradient(to right, red 10%, yellow 30%,blue 70%,orange 90%,black);
/*從左上到右下，按照具體像素漸變*/
background-image: linear-gradient(to bottom right, red 10px, yellow 150px,blue 170px,orange 200px,black);

2 使用angle控制漸變方向

語法：

background-image: linear-gradient(angle, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);

與上述（使用direction控制漸變方向）漸變方式唯一的區別就是該方法是使用角度（angle）控制方向，下圖可以看出其漸變規則。當角度為0deg時，漸變方向從下到上；當角度是90deg時，漸變方向從左到右。

二徑向漸變（radial-gradient)

徑向漸變由中心向外進行顏色漸變。

語法

background-image: radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);

解釋說明：

size參數定義漸變的大小，值可以是closest-side | farthest-side | closest-corner | farthest-corner | <length>。<length>可以去取單值，表示漸變形狀為圓形（circle）且漸變半徑為該值；也可以取雙值，表示漸變形狀為橢圓（ellipse）且其值依次為漸變的橫軸半徑和縱軸半徑。該值也可以缺省，其默認值與shape有關，當shape為circle時，其默認值為farthest-corner；當shape為ellipse時，其默認值與容器尺寸相關，其橫軸半徑為容器寬的一半，縱軸半徑為容器高的一半。
shape參數定義漸變的形狀，值可以是circe | ellipse。該值也可以缺省，默認值為ellipse。
漸變中心點的位置可以自定義，語法為circle at 20px 50px或者ellipse at 20% 50%

三重復漸變（repeating-linear-gradient或者repeating-radial-gradient)

語法

/*重復線性漸變*/
background-image: repeating-linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...); 
/*重復徑向漸變*/
background-image: repeating-radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);

解釋說明：

只需加repeating-即可變成重復漸變，其他參數沒有變化。
最后一種顏色后必須加percentage/length參數，且其小于容器尺寸，否則沒有重復漸變。

四邊框漸變

上面以背景為例講述了漸變的分類及實現，下面簡單擴展一下，講一講邊框的漸變，之前寫過一篇文章《CSS之圖片特殊用法》，里面有講到將圖片作為邊框的背景，漸變神色與上述情況類似，只需要將圖片地址改為漸變色就可以了，示例代碼如下

border-image: linear-gradient( blue ,green ,yellow ,black) 10;

五字體顏色漸變

同樣由《CSS之圖片特殊用法》可以延伸，要是字體顏色漸變，只需要將背景圖改為漸變色就可以了，具體代碼如下：

background-image:radial-gradient( blue 10px,green 20px,yellow ,black); 
background-clip: text;
-webkit-background-clip: text; /*兼容chrome*/
color: transparent;

注：background-clip有兼容性問題，此需要根據瀏覽器不同使用不同的代碼；text屬性值目前是實驗性值，且其在ie中無效，不建議在生產環境中使用。

在線咨詢

上一篇：Web前端基礎教程：HTML5中的video動態怎么設置寬高
下一篇：2021最新MySQL安裝配置教程，mysql數據庫安裝常見問題匯總

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 實現優惠券的技巧

一、最佳實現方式

二、內凹圓角

三、優惠券效果

四、優惠券平鋪效果

五、反向鏤空疊加

六、邊框遮罩

七、總結和說明

linear-gradient和repeating-linear-gradient

radial-gradient

一 線性漸變（linear-gradient)

二 徑向漸變（radial-gradient)

三 重復漸變（repeating-linear-gradient或者repeating-radial-gradient)

四 邊框漸變

五 字體顏色漸變

您的項目需求

一線性漸變（linear-gradient)

二徑向漸變（radial-gradient)

三重復漸變（repeating-linear-gradient或者repeating-radial-gradient)

四邊框漸變

五字體顏色漸變