登录  /  注册
首页 > web前端 > css教程 > 正文

实现优惠券边沿打孔的CSS代码

小云云
发布: 2018-02-09 10:34:42
原创
2479人浏览过

项目中用到了这个边沿打孔的效果,尝试下来使用纯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的高度必须是写死的

具体实现的代码如下:

nbsp;HTML>  
  
  
<meta>  
<meta>  
<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: &#39;&#39;;  
    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>  
  
  
登录后复制
           
  •            

               

               >

                   123               

                         
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                
                   
                         
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                
                      
  •        
  •            

               

               >

                   123               

                         
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                
                   
                         
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                
                      
  •        
  •            

               

               >

                   123               

                         
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                
                   
                         
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                
                      
  •   
     

具体代码实现的真实效果:
 

相关推荐:

生成优惠券码方案

以上就是实现优惠券边沿打孔的CSS代码的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号