Rumah > Artikel > hujung hadapan web > 实现优惠券边沿打孔的CSS代码
实现优惠券边沿打孔的CSS代码
- 小云云asal
- 2018-02-09 10:34:422711semak imbas
项目中用到了这个边沿打孔的效果，尝试下来使用纯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>
具体代码实现的真实效果：
相关推荐：
Atas ialah kandungan terperinci 实现优惠券边沿打孔的CSS代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css3实现鼠标跟随导航效果Artikel seterusnya：Html5之IphoneX适配方法分享