CSS怎么实现优惠券边沿打孔效果

　　介绍

这篇文章给大家分享的是有关CSS怎么实现优惠券边沿打孔效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

效果大致如图

CSS怎么实现优惠券边沿打孔效果

<强>分步实现思路:

1,先画两个带圆角的框,A和B (A、B分别需要加投影效果,图上没有做)

CSS怎么实现优惠券边沿打孔效果

2,在B的左右两条缝隙的地方分别画一排圆(其实是正方形用了50%的圆角),圆填充色和背景色相同(此处背景色是白色,所以圆的填充是白色)

CSS怎么实现优惠券边沿打孔效果

3,给圆孔加上内阴影,达到真实的打孔效果,这里用到的是这样的CSS:

不必:0,1 px  1 px  rgba(0, 0, 0, 0.2),插图;

CSS怎么实现优惠券边沿打孔效果

4,此时B右边的一排圆孔由于加上了内阴影的关系,显得多了右半边,这里需要再对多余部分进行处理

再使用一块和背景色(此处为白色)一致的区块挡住右边多余的一半孔即可(即区域C,为了看清这里用了不一样的颜色,调成和背景色一致后就是开头的效果图)

CSS怎么实现优惠券边沿打孔效果

注意:A和B的宽度可以是自适应的(比如分别是外层的百分之多少),由于打孔的个数和位置的关系,A和B的高度必须是写死的

具体实现的代码如下:

& lt; ! DOCTYPE  HTML>,, 　　& lt; html>,, 　　& lt; head>,, 　　& lt; meta  http-equiv=癈ontent-Type",内容=拔谋?html", charset=皍tf-8",/在,, 　　& lt; meta  name=皏iewport",内容=俺跏?1.0,,最小规模=1.0,最大范围=1.0,user-scalable=no",/在,, 　　& lt; title> Stamp  Demo</title>,, 　　& lt; style>,, 　　html、身体、div, p, i,跨度,ul,李{,, 　　,,,保证金:0;,, 　　,,,填充:0;,, 　　},, 　　身体{,, 　　,,,背景颜色:# eee;,, 　　},, 　　ul {,, 　　,,,list-style:没有,,, 　　},, 　　.stamp_list {,, 　　,,,保证金:20 px 汽车;,, 　　,,,宽度:90%,,, 　　},, 　　.stamp {,, 　　,,,身高:,125 px;,, 　　,,,margin-bottom:, 20 px;,, 　　,,,位置:,相对的,,, 　　,,,box-sizing: border-box;,, 　　,,,这个特性:5 px;,, 　　},, 　　.stamp_inner {,, 　　,,,身高:,125 px;,, 　　,,,显示:inline-block;,, 　　,,,vertical-align:,,, 　　,,,box-sizing: border-box;,, 　　,,,位置:相对,,, 　　,,,这个特性:5 px;,, 　　,,,不必:0,1 px  1 px  rgba (0, 0, 0, 0.2);,, 　　},, 　　.stamp_left {,, 　　,,,宽度:,70%;,, 　　,,,背景:,# ffffff;,, 　　},, 　　.stamp_left  .box {,, 　　,,,位置:绝对的,,, 　　,,,右:0;,, 　　,,,底部:0;,, 　　,,,宽度:78 px;,, 　　,,,身高:81 px;,, 　　},, 　　.stamp_right {,, 　　,,,宽度:30%,,, 　　,,,背景:,# F8E71C;,, 　　},, 　　.circle_list {,, 　　,,,位置:绝对的,,, 　　,,,:5 px;,, 　　},, 　　.circle_list1 {,, 　　,,,左:5 px;,, 　　},, 　　.circle_list2 {,, 　　,,,右:5 px;,, 　　},, 　　.circle_list2:{后,, 　　,,,内容:,& # 39;& # 39;,,, 　　,,,位置:,绝对的,,, 　　,,,:,0;,, 　　,,,底部:,0;,, 　　,,,左:,6 px;,, 　　,,,右:,5 px;,, 　　,,,z - index:, 1,,, 　　background - color,,,,, # eee;,, 　　},, 　　李.circle_list> {,, 　　,,,背景颜色:# eee;,, 　　,,,宽度:10 px;,, 　　,,,身高:10 px;,, 　　,,,这个特性:50%,,, 　　,,,margin-bottom: 5 px;,, 　　,,,不必:0,1 px  1 px  rgba(0, 0, 0, 0.2),插图,,, 　　},, 　　& lt;/style>,, 　　& lt;/head>,, 　　& lt; body>,, 　　& lt; ul 类=皊tamp_list"祝辞,, 　　,,,& lt; li 类=皊tamp"祝辞,, 　　,,,,,,,& lt; div 类=皊tamp_inner  stamp_left"祝辞,, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

CSS怎么实现优惠券边沿打孔效果