一, 实现思路
需求: 画 n 个 20 x 20 的方格, 作为元素 div 的背景图片
思路: 利用 CSS3 的 linear-gradient.
首先设置元素的 background-size 为 20px 20px; 利用 linear-gradient 为元素设置渐变的背景图片, 分别向上下左右四个方向画 0.5px 的线.
二, 实现代码
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 画方块
- </title>
- <style>
- #css3-square { height: 100px; background-image: linear-gradient(to right,
- transparent 19.5px, rgba(77, 163, 228, 1) 20px), linear-gradient(to left,
- transparent 19.5px, rgba(77, 163, 228, 1) 20px), linear-gradient(to top,
- transparent 19.5px, rgba(77, 163, 228, 1) 20px), linear-gradient(to bottom,
- transparent 19.5px, rgba(77, 163, 228, 1) 20px) ; background-size: 20px
- 20px; }
- </style>
- </head>
- <body>
- <div id="css3-square">
- </div>
- </body>
- </HTML>
View Code
三, 实现效果
来源: http://www.bubuko.com/infodetail-3313359.html