如何仅用CSS创建网格(如图纸网格)?

推荐答案

既然你提到了内衬纸:

div {
  background-color: #fff;
  background-size: 100% 1.2em;
  background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);
  background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);
  background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);
  background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);
  background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);
  -pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
  behavior: url(/PIE.htc);
}
<div style="width: 200px; height: 200px"></div>

最后一行:behavior: url(/PIE.htc);是一个名为css3pie的插件,我相信它增加了对ie 6-9的支持.事实上,这个例子取自他们的网站,那里有很多更有趣的例子:http://css3pie.com/demos/gradient-patterns/

Css相关问答推荐

Angular中嵌套数组的网格

Angular Material:如何同时使用2个徽章

如何在JavaFX中设置分隔符的样式?

如何在Angular material 选项卡中设置自定义圆角下划线的样式

如何为FLEX方向编写响应式的CSS

创建始终为剪辑元素的300%高度并左对齐的圆形剪辑路径

在 CSS 中跨列对齐文本基线

使用 React 和 Flexbox 文本溢出框外

如何为以下布局安排网格?

CSS动画移动divs upwords

Flexbox 子高度它的内容

使用 CSS 剪辑/裁剪背景图像

如何隐藏锚文本而不隐藏锚?

如何使用 Bootstrap 3 阻止按钮保持压抑状态

输入/按钮元素不会在 flex 容器中缩小

从样式设置为 % 的元素获取宽度(以像素为单位)?

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?

CSS:悬停一个元素,多个元素的效果?

CSS显示:表格列应该如何工作?

如何在 CSS 中给出背景图像路径?