專案中用到了這個邊沿打孔的效果，嘗試下來使用純css寫的這個樣式，在這裡分享一下：
效果大致如圖
分步實現思路：
1，先畫兩個帶圓角的框，a和b（a、b分別需要加投影效果，圖上沒有做）
2，在b的左右兩條縫隙的地方分別畫一排圓（其實是正方形用了50%的圓角），圓填充色和背景色相同（此處背景色是白色，所以圓的填充是白色）
3，給圓孔加上內陰影，達到真實的打孔效果，這裡用到的是這樣的css：
4，此時b右邊的一排圓孔由於加上了內陰影的關係，顯得多了右半邊，這裡需要再對多餘部分進行處理
再使用一塊和背景色（此處為白色）一致的區塊擋住右邊多餘的一半孔即可（即區域c，為了看清這裡用了不一樣的顏色，調成和背景色一致後就是開頭的效果圖）
注意：a和b的寬度可以是自適應的（比如分別是外層的百分之多少），由於打孔的個數和位置的關係，a和b的高度必須是寫死的
具體實現的**如下：
123
123
ps：未對瀏覽器做完整的相容性測試，已知對於手機瀏覽器和高階瀏覽器（除ie以外的）都是友好的
ie8及以下不支援圓角和內陰影，效果會有差異（洞是方的，外面的盒子沒有圓角）
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製作優惠券
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...