一般做商城類的項目，為了商品促銷早抠，都會有優(yōu)惠券的需求霎烙，如果有UI組可以切圖那能省不少功夫，如果沒有，那么我們自己也可使用CSS畫出這些仿淘寶悬垃、京東的優(yōu)惠券樣式游昼。
radial-gradient()
使用radial-gradient徑向漸變函數(shù)，可以實現(xiàn)一個圓形鏤空的樣子盗忱，在移動端酱床，radial-gradient的兼容性也是相當(dāng)完美。
單個圓形鏤空效果如下：CSS 語法
background: radial-gradient(shape size at position, start-color, ..., last-color);
image.png
.base-one-circle {
width: 100px;
height: 100px;
position: relative;
background: radial-gradient(circle at 0px 50px, transparent 10px, #28A4F2 0) top
}
圓形的位置也可修改趟佃，只需要改“circle at...”后面這個兩個數(shù)值即可扇谣，上，右闲昭，下的數(shù)值分別是：50px,0罐寨、100px,50px、50px,100px序矩。
如果想要一個陰影狀鸯绿，帶有立體感，可加上這個代碼
filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3))
image.png
完整的卡券樣式
利用background: radial-gradient的特性簸淀，我們可以組合成更復(fù)雜瓶蝴、完整的優(yōu)惠券樣式：
image.png
.base-coupons {
width: 250px;
height: 100px;
position: relative;
background: radial-gradient(circle at right top, transparent 10px, #28A4F2 0) top left / 60px 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #28A4F2 0) bottom left /60px 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /190px 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /190px 51% no-repeat;
filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
}
如果想要在卡券的拼接處加上虛線效果，我們可以利用偽類去實現(xiàn)：
.base-coupons::before {
content: '';
height: 80px;
border: 1px dashed #fff;
position: absolute;
left: 60px;
top: 0;
bottom: 0;
margin: auto;
}
那么最終的優(yōu)惠券樣式效果：
image.png
linear-gradient()
CSS 語法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient 函數(shù)是一個線性漸變函數(shù)租幕，我們可以使用這個線性漸變加偽類來實現(xiàn)一個優(yōu)惠券的鋸齒狀效果舷手，如下：
image.png
.base-coupons::after {
content: '';
position: absolute;
height: 100%;
width:5px;
top: 0;
right: -5px;
background-image: linear-gradient(to bottom, #eeeeee 5px, transparent 5px, transparent),
radial-gradient(10px circle at 5px 10px, transparent 5px, #eeeeee 5px);
background-size: 5px 15px;
}
