本篇文章给大家介绍一下 CSS 如何实现信纸 / 同学录效果?(附代码). 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
实现思路:
网格背景, 由 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>
本文转载自: https://segmentfault.com/a/1190000017273346
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17542.html