摘要：關(guān)于徑向漸變的具體使用可以參考張?chǎng)涡竦奈恼聫较驖u變語(yǔ)法及輔助理解案例則那么怎樣實(shí)現(xiàn)我們要的效果呢我們先看看徑向漸變的語(yǔ)法徑向漸變由它的中心定義。

查看原文可以有更好的排版效果哦

我們?cè)谄綍r(shí)的網(wǎng)頁(yè)中，經(jīng)常會(huì)見到這樣的優(yōu)惠券或者其他的券（特征就是會(huì)有反方向的圓角）。

可能大部分前端人員為了簡(jiǎn)單，直接采用圖片的方式，直接把整張圖作為背景。其實(shí)這也沒什么不好的，簡(jiǎn)單，方便，還沒有兼容性問題，ie6跑起來(lái)都沒得問題。

如果不考慮那些低舊瀏覽器的話，還是有辦法直接用css來(lái)實(shí)現(xiàn)，有幾個(gè)好處

1.擴(kuò)展方便，比如之前是300 100的，現(xiàn)在要改成300 150的，就一行代碼的事
2.沒有圖片，加載起來(lái)也更快了，也節(jié)省了帶寬

我們先實(shí)現(xiàn)大致的框架，左右兩部分

下面就來(lái)實(shí)現(xiàn)中間看著比較復(fù)雜的"凹槽"部分

我能想到跟圓角相關(guān)的有圓角、圓形、徑向...這些吧

有人說(shuō)svg也可以，確實(shí)svg什么都可以做，不光是這種形狀，只要畫個(gè)路徑，填充一下就完事，這個(gè)比較通用，并不是這個(gè)特例，所以在這里不討論用這個(gè)方式。
還有一個(gè)原因，svg生成的形狀也是固定了的，只能等比縮放，不能做其他自適應(yīng)了。

看到這樣的形狀，一般人可能會(huì)想會(huì)不會(huì)可以用border-radius的負(fù)值呢，畢竟像margin那些，使用負(fù)值往往可以帶來(lái)意想不到的效果

.con{
  border-radius:-10px;
}

很可惜，這種寫法根本就是不合法的，在谷歌瀏覽器上打開控制臺(tái)可以看到直接被刪除了。

雖然說(shuō)這種思路不行，但是我們可以換一種思路。

假設(shè)我們現(xiàn)在有一個(gè)圓，它本身沒有顏色，但是它有一個(gè)黑色的邊框

現(xiàn)在我們想象一下，假如這個(gè)圓的邊框越來(lái)越大，外面有個(gè)容器如果超出就會(huì)隱藏，會(huì)發(fā)生什么呢

如果這個(gè)圓在右下角，那么就變成了這樣

這不就是我們需要的嗎？

現(xiàn)在我們用css來(lái)實(shí)現(xiàn)

根據(jù)上面的分析，我們背景的顏色應(yīng)該是圓的邊框的顏色，所以原背景要去掉

.coupon-left{
  position:relative;
  overflow:hidden;
  /*background:#252525*/
}
/*為了減少html的結(jié)構(gòu)，我們使用偽元素*/
.coupon-left::before{
  position:absolute;
  width:20px;
  height:20px;
  top:-210px;
  right:-210px;
  border-radius:50%;
  border:200px solid #252525;/*邊框只要能夠覆蓋整個(gè)容器就行*/
}

這樣就實(shí)現(xiàn)了一個(gè)凹槽。

本來(lái)以為這樣下去，復(fù)制一下，改寫一下就完事了的，結(jié)果發(fā)現(xiàn)沒這么簡(jiǎn)單，因?yàn)楝F(xiàn)在形狀是被裁剪出來(lái)的，所以我們不能讓上一個(gè)圓角把整個(gè)都覆蓋，不然下面的圓角就出不來(lái)了，這時(shí)我們要用到clip裁剪功能

關(guān)于clip這里簡(jiǎn)單介紹一下，我們一般會(huì)用到rect這個(gè)功能，有四個(gè)值，分別是上右下左

clip: rect(, , , );

這里我們改造一下我們剛才寫的樣式，添加如下代碼

.coupon-left::before{
  clip: rect(0,210px,285px,0);
}

這樣就和下半部分隔離開來(lái)了，下面做下半部分的凹槽，我們用::after，寫法完全一致，注意一下坐標(biāo)就行了

.coupon-left::after{
  content: "";
  position: absolute;
  top: -210px;
  display: block;
  right: -210px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 200px solid #252525;
  clip: rect(135px,210px,285px,0);
}

這樣就完美的實(shí)現(xiàn)了兩個(gè)凹槽，右邊的原理同樣，下面是完整的css代碼

html,body{
  box-sizing:border-box;
  margin:0;
  padding:20px;
  height:100%;
  background:#fadaa7;
}
.coupon{
  display:inline-block;
  overflow:hidden;
  border-radius:10px;
}
.coupon-left{
  float:left;
  width:150px;
  height:150px;
  position:relative;
}
.coupon-left::before{
  content: "";
  position: absolute;
  top: -210px;
  display: block;
  right: -210px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 200px solid #252525;
  clip: rect(0,210px,285px,0);
}
.coupon-left::after{
  content: "";
  position: absolute;
  bottom: -210px;
  display: block;
  right: -210px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 200px solid #252525;
  clip: rect(135px,210px,285px,0);
}
.coupon-con{
  float:left;
  width:350px;
  height:150px;
  position:relative;
}
.coupon-con::before{
  content: "";
  position: absolute;
  top: -410px;
  display: block;
  left: -410px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 400px solid #fff;
  clip: rect(0,800px,485px,410px);
}
.coupon-con::after{
  content: "";
  position: absolute;
  bottom: -410px;
  display: block;
  left: -410px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 400px solid #fff;
  clip: rect(335px,800px,485px,410px);
}

下面是codepen演示

https://codepen.io/xboxyan/pe...

還有一個(gè)思路就是徑向漸變。

關(guān)于徑向漸變的具體使用可以參考張?chǎng)涡竦奈恼翪SS3 radial-gradient徑向漸變語(yǔ)法及輔助理解案例10則

那么怎樣實(shí)現(xiàn)我們要的效果呢

我們先看看徑向漸變的語(yǔ)法

radial-gradient([[ || ] [at ]?,| at ,]?[,]+);

徑向漸變由它的中心定義。

用法

{
  background:radial-gradient(circle at 50px 50px, yellow, orange 33.33%, red 66.666%, white)
}

我們把漸變的顏色改成透明到黑色的漸變

{
  background:radial-gradient(circle at 50px 50px, transparent, #252525)
}

現(xiàn)在把透明的部分給一個(gè)距離，灰色的部分也給一個(gè)距離，讓他們之前的漸變區(qū)域重合，就變成純色了

{
  background:radial-gradient(circle at 50px 50px, transparent 20px, #252525 20px)
}

現(xiàn)在把這個(gè)空心圓移到邊緣

{
  background:radial-gradient(circle at right top, transparent 20px, #252525 20px)
}

現(xiàn)在就是如何做出兩個(gè)凹槽的問題

我們有兩種方式，一種是和上面的一樣，用兩個(gè)偽元素拼接而成，第二種就是直接利用css3的多背景拼接

我們先說(shuō)說(shuō)第二種

{
  background:radial-gradient(circle at right top, transparent 20px, #252525 20px, #252525 100px, transparent 100px),radial-gradient(circle at right bottom, transparent 20px, #252525 20px, #252525 100px, transparent 100px)
}

我們可以繼續(xù)拼接，可能可以實(shí)現(xiàn)我們想要的效果

現(xiàn)在來(lái)說(shuō)說(shuō)第一種方法

我們把代碼放入我們的例子當(dāng)中

.coupon-left::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  height:50%;
  background:radial-gradient(circle at right top, transparent 10px, #252525 10px, #252525 10px)
}
.coupon-left::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right:0;
  height:50%;
  background:radial-gradient(circle at right bottom, transparent 10px, #252525 10px, #252525 10px)
}
.coupon-con::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  height:50%;
  background:radial-gradient(circle at left top, transparent 10px, #252525 10px, #fff 10px)
}
.coupon-con::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right:0;
  height:50%;
  background:radial-gradient(circle at left bottom, transparent 10px, #252525 10px, #fff 10px)

怎么樣，是不是很方便？里面都是相對(duì)值，意味著有更好的適應(yīng)性

下面是codepen演示

https://codepen.io/xboxyan/pe...

相比于用圓形來(lái)實(shí)現(xiàn)，這種徑向漸變更方便擴(kuò)展，寫起來(lái)也容易。

但是并不是說(shuō)圓形的思路不對(duì)，如果只是做一個(gè)圓形缺口的話，那種寫法更方便，在思維上，也更領(lǐng)先一步，更能鍛煉一個(gè)人的空間思考和想象能力，更有設(shè)計(jì)師角度的意味，這大概是和一般程序員思維最大的不同之處吧
徑向漸變一直以來(lái)的兼容性問題要比圓角大的多，每種瀏覽器內(nèi)核的寫法都不盡相同，雖然目前都基本支持標(biāo)準(zhǔn)寫法了，但平時(shí)的項(xiàng)目還是要注意一些。實(shí)在是兼容性要求，那只能用圖片代替了，誰(shuí)叫客戶第一呢