一、實現思路
需求：畫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>
三、實現效果
