本文首發(fā)于微信公眾號(hào)：布依前端
微信號(hào)：qny-1009
轉(zhuǎn)載請(qǐng)注明出處
原創(chuàng)不易，覺得有用的話，多轉(zhuǎn)發(fā)點(diǎn)贊支持

作為前端開發(fā)者，經(jīng)常碰到不規(guī)則元素需求，尤其是購物類的優(yōu)惠券，元素長相怪異，沒有接觸過就會(huì)犯懵，見多識(shí)廣，會(huì)者不難。安利一波這類效果制詳細(xì)過程，下列所有案例的徑向漸變和線性漸變屬性都是可以自行調(diào)試的，包括遮罩位置和遮罩元素大小，案例中遮罩圓的大小可以通過漸變參數(shù)調(diào)節(jié)的。

????? ?想到CSS不規(guī)則圖形，想到徑向漸變遮罩能實(shí)現(xiàn)，先看看最終實(shí)現(xiàn)的整體效果。文章篇幅有點(diǎn)長，耐心看完，收獲慢慢。

圖解：圖中 1 和 2 優(yōu)惠券效果是單獨(dú)徑向漸變組合的效果，其余都是CSS蒙版mask實(shí)現(xiàn)的。

新建一個(gè)HTML文件，把通用樣式和頁面結(jié)構(gòu)復(fù)制粘貼到文件內(nèi)部，用瀏覽器打開可以查看效果。

通用樣式，其余樣式逐漸往下添加，每個(gè)優(yōu)惠券可能樣式不一樣。

頁面結(jié)構(gòu)

圖一制作

原理：利用背景圖屬性的大小，位置和默認(rèn)平鋪元素實(shí)現(xiàn)，背景用徑向漸變（默認(rèn)透明，大小自定義)完成，利用背景屬性size和position調(diào)整平鋪元素之間的間距和位置，就能形成摳圖效果，這種方式缺點(diǎn)是無法實(shí)現(xiàn)背景漸變效果。

background-size: x y；x表示調(diào)整背景元素水平方向間距，y表示調(diào)整元素垂直方向的間距。

background-position: x y；x表示背景元素水平方向位置，y表示背景元素垂直方向位置。

調(diào)整過程如圖所示

效果如下

利用偽類元素添加虛線

完成后效果展示

圖四制作

原理：利用css的蒙版mask屬性來遮罩，蒙版的參數(shù)屬性和背景參數(shù)相似，也有size和position屬性，作用和背景圖的一致，效果演示查看圖一制作過程，這種方式可以設(shè)置漸變背景效果，增加樣式。

得到效果是這樣的，裁剪同時(shí)具備漸變效果。

圖二制作

圖二利用徑向漸變四個(gè)拼接而成，每個(gè)徑向漸變占四分之一，每個(gè)徑向漸變部分位置分別為左上角，右上角，左下角和右下角。這種方式缺點(diǎn)：無法設(shè)置元素漸變效果。如果要用漸變可以用圖一或者圖四代碼。

圖三制作

圖三利用蒙版mask和圖一或者圖四相似，這里是兩個(gè)蒙版漸變屬性整合，同時(shí)能實(shí)現(xiàn)漸變背景效果。

注意：如果需要多個(gè)徑向漸變效果，那么可以簡寫單個(gè)徑向漸變屬性，多個(gè)用都號(hào)隔開。反之，可以單獨(dú)設(shè)置徑向漸變效果屬性，如下注釋部分的代碼。

圖六制作

圖六利用徑向漸變做背景裁剪，線性漸變做背景色分離效果，設(shè)置漸變顏色占比就能實(shí)現(xiàn)顏色分離，不會(huì)產(chǎn)生漸變效果。

總結(jié)：mask遮罩摳圖是利用背景圖默認(rèn)平鋪效果，可以調(diào)節(jié)背景圖重復(fù)元素的間距和位置實(shí)現(xiàn)摳圖效果，可以實(shí)現(xiàn)漸變背景效果。而圖二中的背景徑向漸變是拼圖原理，利用四個(gè)角來拼接摳圖。實(shí)現(xiàn)優(yōu)惠券效果的方式目前分享這兩種，后期有用到的在分享出來。