html - 仅使用 CSS 和 HTML 用框填充页面

Question

假设您有一个 100 像素 x 100 像素的容器。你想用 5px x 5px 的“盒子”来填充它。为了简单起见，您可以忽略填充、边框宽度、边距。有没有办法仅使用 CSS 和 HTML 以声明方式执行此操作(无需手动声明确切的框数)？

编辑:我的初衷是盒子实际上是元素。但我很欣赏这种创造力。

Answer 1

如果这些“框”是单独的 HTML 元素，那么不，仅使用 HTML 和 CSS 是不可能的。您需要使用服务器端代码或 JavaScript 来生成它们。

如果这些“盒子”只是视觉元素，您可以使用 5px x 5px 的背景图片，然后在 CSS 中设置 background-repeat: repeat;。

div {
  width: 100px;
  height: 100px;
  background: url("http://i.stack.imgur.com/lOtMo.png") 
              repeat
              top left/5px 5px;
}

<div></div>