這篇文章給大家分享的是有關(guān)CSS怎么實(shí)現(xiàn)優(yōu)惠券邊沿打孔效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

青白江網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

效果大致如圖

分步實(shí)現(xiàn)思路：

1，先畫(huà)兩個(gè)帶圓角的框，A和B（A、B分別需要加投影效果，圖上沒(méi)有做）

2，在B的左右兩條縫隙的地方分別畫(huà)一排圓（其實(shí)是正方形用了50%的圓角），圓填充色和背景色相同（此處背景色是白色，所以圓的填充是白色）

3，給圓孔加上內(nèi)陰影，達(dá)到真實(shí)的打孔效果，這里用到的是這樣的css：

box-shadow:0 1px 1px rgba(0,0,0,0.2) inset;

4，此時(shí)B右邊的一排圓孔由于加上了內(nèi)陰影的關(guān)系，顯得多了右半邊，這里需要再對(duì)多余部分進(jìn)行處理

再使用一塊和背景色（此處為白色）一致的區(qū)塊擋住右邊多余的一半孔即可（即區(qū)域C，為了看清這里用了不一樣的顏色，調(diào)成和背景色一致后就是開(kāi)頭的效果圖）

注意：A和B的寬度可以是自適應(yīng)的（比如分別是外層的百分之多少），由于打孔的個(gè)數(shù)和位置的關(guān)系，A和B的高度必須是寫(xiě)死的

具體實(shí)現(xiàn)的代碼如下：

  
  
  
  
  
  
  
  
  
  
      
          
          
            123