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

2022-09-24 23:48:06 字數 590 閱讀 2709

專案中用到了這個邊沿打孔的效果,嘗試下來使用純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 第一種情況 純色 自身 優惠券 的顏色是純色的,這個實現...