纯css3实现信纸/同学录效果（代码示例）
码农天地 -
实现思路：
网格背景，由css3的线性渐变来实现。
纸上的打孔，由圆和圆柱组成，多个打孔，可以由box-shadow的平铺来实现。
实际代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title><style>.bg-grid { height: 400px; padding: 10px; padding-top: 64px; background-color: #efefef; background-image: linear-gradient(#e7e6e6 1px, transparent 0), linear-gradient(90deg, #e7e6e6 1px, transparent 0); background-size: 21px 21px, 21px 21px; background-position: center;}.bg-grid:before,.bg-grid:after{ content: ''; position: absolute; z-index: 0; left: 50%; transform: translateX(-50%); display: inline-block; background-color: #fff; height: 28px; box-shadow: 68px 0 0 0 #fff, calc(68px * 2) 0 0 0 #fff, calc(68px * 3) 0 0 0 #fff, calc(68px * 4) 0 0 0 #fff, calc(68px * 5) 0 0 0 #fff, -68px 0 0 0 #fff, calc(68px * -2) 0 0 0 #fff, calc(68px * -3) 0 0 0 #fff, calc(68px * -4) 0 0 0 #fff, calc(68px * -5) 0 0 0 #fff;}.bg-grid:before { top: 0; width: 10px;}.bg-grid:after { top: 26px; width: 28px; border-radius: 50%;}.bg-grid{}</style></head><body><div></div></body></html>更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全
更多相关教程请访问 CSS3最新版参考手册
以上就是纯css3实现信纸/同学录效果（代码示例）的详细内容，更多请关注php中文网其它相关文章！
微信分享相关标签：css3本文转载于：segmentfault，如有侵犯，请联系a@php.cn删除上一篇：CSS 预处理器下一篇：如何居中一个浮动元素？如何让绝对定位的div居中？相关文章
相关视频
CSS3边框阴影实现2种图片列表展示效果-案例解析...CSS3线性渐变实现4圆环相连（代码实例）CSS3中text-shadow实现文字阴影效果（...CSS3中background-orgin实现带相...纯css3实现信纸/同学录效果（代码示例）使用CSS3边框属性使用CSS3边框图像(border-image)属性（上）使用CSS3背景属性使用CSS3文本属性使用CSS3动画属性网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论立即提交专题推荐独孤九贱-php全栈开发教程全栈 100W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
玉女心经-web前端开发教程入门 50W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
天龙八部-实战开发教程实战 80W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息青灯夜游
今天学习一小步，明天提升一大步
最近文章分享一些值得前端开发者收藏的 GitHub 库414快速了解HTTP和HTTPS协议！486HTTPS怎么保证安全？（详解）450发布技术文章最新文章热门排行CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析（代码实例）使用 CSS 实现一个简单的骨架屏（Skeleton Screen）使用CSS实现皮卡丘CSS 中伪类的使用（干货）适合初学者学习的CSS3实现可爱的动物css3常见新特性介绍position的几个属性的作用分别是什么如何居中一个浮动元素？如何让绝对定位的div居中？html怎么添加背景图片且让图片平铺整个页面？（代码示例）css如何设置背景图片？background属性添加背景图片css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍html a标签怎么设置颜色？超链接的颜色设置总结（css样式）使用css3在网页中实现各种三角形样式集合（原理解析）css如何设置透明度？设置透明度的两种方法（代码实例）css实现背景颜色半透明的两种方法css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法推荐视频教程传智播客、黑马CSS3基础、加强与进阶HTML5+CSS3快速入门视频教程Css3入门基础视频教程CSS3进阶视频教程视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 287557;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司
Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作
座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101
var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer(); 特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。
上一篇： Vue 动态加载 Vuex
下一篇： ps中选区变路径有快捷键么
Tags 标签
加个好友，技术交流
