跳到主要内容

1 篇博文 含有标签「网格背景」

查看所有标签

· 阅读需 6 分钟
编程范儿

是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。

这里介绍如何只通过 CSS 来实现这个需求？

使用背景图​

这里我们的背景图使用 SVG 来创建，首先，创建绘出一个正方形，填充白色；然后通过矩形实现垂直和水平的线条，进而分别对它们进行定位居中。

<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>
  <rect width='40' height='40' fill='#fff'></rect>
  <rect x='50%' width='1' height='100%' fill='rgb(203 213 225)'></rect>
  <rect y='50%' width='100%' height='1' fill='rgb(203 213 225)'></rect>
</svg>