專案中用到了這個邊沿打孔的效果，嘗試下來使用純css寫的這個樣式，在這裡分享一下：
效果大致如圖
分步實現思路：
1，先畫兩個帶圓角的框，a和b（a、b分別需要加投影效果，圖上沒有做）
2，在b的左右兩條縫隙的地方分別畫一排圓（其實是正方形用了50%的圓角），圓填充色和背景色相同（此處背景色是白色，所以圓的填充是白色）
3，給圓孔加上內陰影，達到真實的打孔效果，這裡用到的是這樣的css：
box-shadow:0 1px 1px rgba(0,0,0,0.2) inset;
4，此時b右邊的一排圓孔由於加上了內陰影的關係，顯得多了右半邊，這裡需要再對多餘部分進行處理
再使用一塊和背景色（此處為白色）一致的區塊擋住右邊多餘的一半孔即可（即區域c，為了看清這裡用了不一樣的顏色，調成和背景色一致後就是開頭的效果圖）
注意：a和b的寬度可以是自適應的（比如分別是外層的百分之多少），由於打孔的個數和位置的關係，a和b的高度必須是寫死的
具體實現的**如下：
stamp demo
具體**實現的真實效果：
總結本文標題: css實現優惠券邊沿打孔效果
本文位址:
css 效果 邊沿打孔的優惠券
專案中用到了這個邊沿打孔的效果，嘗試下來使用純css寫的這個樣式，在這裡分享一下 效果大致如圖 分步實現思路 1，先畫兩個帶圓角的框，a和b a b分別需要加投影效果，圖上沒有做 2，在b的左右兩條縫隙的地方分別畫一排圓 其實是正方形用了50 的圓角 圓填充色和背景色相同 此處背景色是白色，所以圓的...
css繪製卡券優惠券 CSS 實現優惠券樣式
本文將介紹如何使用 css 中的 radial gradient 實現如下圖所示的優惠券樣式效果 繪製基本樣式 首先，我們繪製出優惠券的基本樣式，這很簡單，就不多說了。滿 100 減 30 scss voucher width 600px height 200px display flex left...
css3實現優惠券效果（向內凹的圓）
背景色和自身 優惠券 的顏色會改變，實現向內凹的圓效果，效果圖如下。如果叫設計師切好幾十種背景圖是很不現實的，只能用 來實現，效能會比較好。隨著背景色的改變，向內凹圓的背景色也要跟著變，因此，向內凹陷的部分只能設定成透明。實現如下三種情況 1 第一種情況 純色 自身 優惠券 的顏色是純色的，這個實現...