實現優惠券邊沿打孔的CSS代碼

最後更新：2018-02-09 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

項目中用到了這個邊沿打孔的效果，嘗試下來使用純css寫的這個樣式，本文主要給大家分享使用純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的高度必須是寫死的

具體實現的代碼如下：

<!DOCTYPE HTML>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  <title>Stamp Demo</title>  <style>  html,body,p,p,i,span,ul,li{      margin:0;      padding:0;  }  body{      background-color:#eee;  }  ul{      list-style:none;  }  .stamp_list{      margin:20px auto;      width:90%;  }  .stamp{      height: 125px;      margin-bottom: 20px;      position: relative;      box-sizing:border-box;      border-radius:5px;  }  .stamp_inner{      height: 125px;      display:inline-block;      vertical-align:top;      box-sizing:border-box;      position:relative;      border-radius:5px;      box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);  }  .stamp_left{      width: 70%;      background: #ffffff;  }  .stamp_left .box{      position:absolute;      right:0;      bottom:0;      width:78px;      height:81px;  }  .stamp_right{      width:30%;      background: #F8E71C;  }  .circle_list{      position:absolute;      top:5px;  }  .circle_list1{      left:-5px;  }  .circle_list2{      right:-5px;  }  .circle_list2:after{      content: '';      position: absolute;      top: 0;      bottom: 0;      left: 6px;      right: -5px;      z-index: 1;      background-color: #eee;  }  .circle_list>li{      background-color:#eee;      width:10px;      height:10px;      border-radius:50%;      margin-bottom:5px;      box-shadow:0 1px 1px rgba(0,0,0,0.2) inset;  }  </style>  </head>  <body>  <ul class="stamp_list">      <li class="stamp">          <p class="stamp_inner stamp_left">          </p          ><p class="stamp_inner stamp_right">              <span>123</span>              <ul class="circle_list circle_list1">                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>              </ul>              <ul class="circle_list circle_list2">                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>              </ul>          </p>      </li>      <li class="stamp">          <p class="stamp_inner stamp_left">          </p          ><p class="stamp_inner stamp_right">              <span>123</span>              <ul class="circle_list circle_list1">                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>              </ul>              <ul class="circle_list circle_list2">                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>              </ul>          </p>      </li>      <li class="stamp">          <p class="stamp_inner stamp_left">          </p          ><p class="stamp_inner stamp_right">              <span>123</span>              <ul class="circle_list circle_list1">                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>              </ul>              <ul class="circle_list circle_list2">                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>                  <li></li>              </ul>          </p>      </li>  </ul>  </body>  </html>

具體代碼實現的真實效果：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More