摘要：關于徑向漸變的具體使用可以參考張鑫旭的文章徑向漸變語法及輔助理解案例則那么怎樣實現我們要的效果呢我們先看看徑向漸變的語法徑向漸變由它的中心定義。

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

我們在平時的網頁中，經常會見到這樣的優惠券或者其他的券（特征就是會有反方向的圓角）。

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

如果不考慮那些低舊瀏覽器的話，還是有辦法直接用css來實現，有幾個好處

1.擴展方便，比如之前是300 100的，現在要改成300 150的，就一行代碼的事
2.沒有圖片，加載起來也更快了，也節省了帶寬

我們先實現大致的框架，左右兩部分

下面就來實現中間看著比較復雜的"凹槽"部分

我能想到跟圓角相關的有圓角、圓形、徑向...這些吧

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

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

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

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

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

假設我們現在有一個圓，它本身沒有顏色，但是它有一個黑色的邊框

現在我們想象一下，假如這個圓的邊框越來越大，外面有個容器如果超出就會隱藏，會發生什么呢

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

這不就是我們需要的嗎？

現在我們用css來實現

根據上面的分析，我們背景的顏色應該是圓的邊框的顏色，所以原背景要去掉

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

這樣就實現了一個凹槽。

本來以為這樣下去，復制一下，改寫一下就完事了的，結果發現沒這么簡單，因為現在形狀是被裁剪出來的，所以我們不能讓上一個圓角把整個都覆蓋，不然下面的圓角就出不來了，這時我們要用到clip裁剪功能

關于clip這里簡單介紹一下，我們一般會用到rect這個功能，有四個值，分別是上右下左

clip: rect(, , , );

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

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

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

.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);
}

這樣就完美的實現了兩個凹槽，右邊的原理同樣，下面是完整的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...

還有一個思路就是徑向漸變。

關于徑向漸變的具體使用可以參考張鑫旭的文章CSS3 radial-gradient徑向漸變語法及輔助理解案例10則

那么怎樣實現我們要的效果呢

我們先看看徑向漸變的語法

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)
}

現在把透明的部分給一個距離，灰色的部分也給一個距離，讓他們之前的漸變區域重合，就變成純色了

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

現在把這個空心圓移到邊緣

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

現在就是如何做出兩個凹槽的問題

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

我們先說說第二種

{
  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)
}

我們可以繼續拼接，可能可以實現我們想要的效果

現在來說說第一種方法

我們把代碼放入我們的例子當中

.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)

怎么樣，是不是很方便？里面都是相對值，意味著有更好的適應性

下面是codepen演示

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

相比于用圓形來實現，這種徑向漸變更方便擴展，寫起來也容易。

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