做商城類項目的時候，我們可能都會經歷過“優惠券”這類需求，筆者在過往工作中，都是直接要求UI切圖來實現，直到有一天產品告訴我一個奇思妙想：這個優惠券的寬度會隨內容變化的！一下子讓我陷入了人生的大思考，這樣圖片方式可不好整吶，因此萌生一個想法：能不能用純css實現這些效果呢？

0. 內倒角

首先我們來看下css如何實現內倒角

.card {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px),
        radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 100px top, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 100px bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}

效果圖：

內倒角效果圖

其實最先想到的是畫圓形，在這個例子當中，主要是利用了設置背景圖的屬性與radial-gradient漸變來實現，實際效果差不多，在形狀上呢還是保持整體方形，相信大家也看出來副作用，首先這個添加的漸變需要和背景顏色同步，比如設置的倒角是白色，背景是灰色的，那就露餡啦。

1. 實現虛線

上面實現了內倒角，接下來就要考慮虛線了，既然要純css，能不能把虛線也給優雅地實現了呢，其實線性漸變就可以做到，一起來看看：

.line {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

代碼效果：

虛線

/* 稍微調整下size屬性就能改變虛線寬度 */
background-size: 20px 1px;

虛線2

2. 實現波浪框

同樣是利用徑向漸變，我們嘗試下波浪框效果：

.card {
    background: red;
    width: 200px;
    height: 100px;
    position: relative;
}
.card:after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
    background-size: 10px 10px;
}

bolang

3. 組合

通過以上例子，優惠券剪卡風格的效果已經呼之欲出了，我們只需要把這些效果組合起來，對顏色位置寬度等細節進行調整~

豎型優惠券例子效果：

.card1 {
    width: 120px;
    height: 150px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 90px, #fff, #fff 10px, transparent 10px),
        radial-gradient(circle at right 90px, #fff, #fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card1 > .line {
    position: absolute;
    bottom: 60px;
    left: 14px;
    width: 96px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

究極組合，橫型優惠券剪卡風格效果：

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at 130px top, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 130px bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card2 > .line {
    position: absolute;
    top: 50px;
    right: 31px;
    width: 78px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
    transform:rotate(90deg);
}

.card2:after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
/* 這里可以優化一下，變為半圓，right也可以設置為0了 */
    background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);
    background-size: 10px 14px;
}

是不是有那么點味道了呢，僅用徑向漸變和線性漸變就能做出來效果，一想到UI小姐姐都不用切圖給我，可以早早下班回去陪她男朋友了，我趕緊向她展示了成果，沒想到小姐姐跟我說，你這沒陰影不好看呀，這下子讓我又一次陷入了人生的大思考。

回到工位上，我放棄了思考，顫抖的手胡亂地加了一個shadow，果然，露餡了啊！

但是我們要冷靜，之前的思路是先畫一個方形，然后放置圓形或半圓疊蓋，所以最終還是會原形畢露，結果還是必須掏空那段半圓缺口啊，可css明顯是做不到的

等等，這時候就需要逆轉想法，不是先畫一個方形再剔除半圓，而是一開始就不畫半圓這個缺口，將整個不規則形狀填充出來，也就不需要剔除半圓了，先來看看下面這段css以及它的效果：

width: 300px;
  height: 100px;
  background: 
  radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,
  radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,
  radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,
  radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;

按這個思路將上面的例子轉為畫上下兩瓣方形，給透明徑向漸變繪制的circle以外的區域填上顏色，而陰影部分就用filter來處理

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background: 
        radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,
        radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;
    border-radius: 4px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
    /* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); */
}
.card2 > .line {
    /* 沒變化 */
}

最終效果如下，為了看清陰影故意加深了：

沒辦法，波浪框還是覆蓋上去的半圓，所以設置不上貼合的陰影效果，但是基本的券卡形式總算是完美實現了。

第二天UI小姐姐跟我說，她改了設計圖，叫我看看，我說停停，要不你還是切圖給我吧。

以上就是文章的全部內容，希望對你有所幫助！如果覺得文章寫的不錯，可以點贊收藏，也歡迎關注，我會持續更新更多前端有用的知識與實用技巧，希望與你共同成長~關于作者茶無味de一天