項目中用到了這個邊沿打孔的效果，嘗試下來使用純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,div,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">
<div class="stamp_inner stamp_left">
</div
><div 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>
</div>
</li>
<li class="stamp">
<div class="stamp_inner stamp_left">
</div
><div 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>
</div>
</li>
<li class="stamp">
<div class="stamp_inner stamp_left">
</div
><div 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>
</div>
</li>
</ul>
</body>
</html>具體代碼實現的真實效果：
ps：未對瀏覽器做完整的兼容性測試，已知對於手機瀏覽器和高級瀏覽器（除ie以外的）都是友好的
IE8及以下不支持圓角和內陰影，效果會有差異（洞是方的，外面的盒子沒有圓角）
