css3實現優惠券效果（向內凹的圓）

背景色和自身（優惠券）的顏色會改變，實現向內凹的圓效果，效果圖如下。如果叫設計師切好幾十種背景圖是很不現實的，只能用**來實現，效能會比較好。隨著背景色的改變，向內凹圓的背景色也要跟著變，因此，向內凹陷的部分只能設定成透明。

實現如下三種情況：

1、第一種情況（純色）

自身（優惠券）的顏色是純色的，這個實現起來比較簡單，主要**如下：

.box

background: radial-gradient(shape size at position, start-color, ..., last-color);

background-position:圓畫在優惠券的左邊

background-size: （x,y）兩個圓之間的距離

2、第二種情況（漸變，圓在左右兩邊）

可以把優惠券劃分為三個部分：左邊圓，中間主體，右邊圓，主要**如下：

.box1

3、第三種情況（漸變，圓在上下兩邊）

把優惠券分為四個部分，左邊主體線性漸變，上圓，下圓，右邊主體線性漸變，主要**如下：

.box2

css3製作優惠券

demo stamp stamp stamp before stamp after stamp i stamp par stamp par p stamp par span stamp par sign stamp par sub stamp copy stamp copy p stamp01 st...

css繪製卡券優惠券 CSS 實現優惠券樣式

本文將介紹如何使用 css 中的 radial gradient 實現如下圖所示的優惠券樣式效果 繪製基本樣式 首先，我們繪製出優惠券的基本樣式，這很簡單，就不多說了。滿 100 減 30 scss voucher width 600px height 200px display flex left...

CSS實現優惠券邊沿打孔效果

專案中用到了這個邊沿打孔的效果，嘗試下來使用純css寫的這個樣式，在這裡分享一下 效果大致如圖 分步實現思路 1，先畫兩個帶圓角的框，a和b a b分別需要加投影效果，圖上沒有做 2，在b的左右兩條縫隙的地方分別畫一排圓 其實是正方形用了50 的圓角 圓填充色和背景色相同 此處背景色是白色，所以圓的...