北京网站建设出名 乐云践新,世界上做的最后的网站,网络营销产品策略分析,西安做网站公司哪家好 应该怎么选择来源#xff1a;how-to-make-a-grid-like-graph-paper-grid-with-just-css 在看 用于打印到纸张的 CSS 这篇文章时#xff0c;对其中的网格比较好奇#xff0c;作者提供了 stackoverflow 的链接#xff0c;就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较… 来源how-to-make-a-grid-like-graph-paper-grid-with-just-css 在看 用于打印到纸张的 CSS 这篇文章时对其中的网格比较好奇作者提供了 stackoverflow 的链接就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式贴在下面展示。
样式1
效果图
样式代码
!DOCTYPE html
html
style
html
{width: 100%;height: 100%;background-color: lightblue;background-size: 1cm 1cm;background-image:linear-gradient(to right, grey 1px, transparent 1px),linear-gradient(to bottom, grey 1px, transparent 1px);
}
/style
bodyh1Sample text/h1h2Sample text/h2h3Sample text/h3h4Sample text/h4psample text/ph1示例文字/h1h2示例文字/h2h3示例文字/h3h4示例文字/h4p示例文字/p
/body
/html打印预览无边距时选择A4纸时的尺寸和格子数量刚好一样用这种背景比较方便做排版和套打下图是打印后的效果 和A4纸的尺寸 21.0 x 29.7厘米(8.27 x 11.69英寸) 是一致的。
样式2
效果图
样式代码
!DOCTYPE html
html
style
html
{width: 100%;height: 100%;background-color: lightblue;background-size: 40px 40px;background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}
/style
bodyh1Sample text/h1h2Sample text/h2h3Sample text/h3h4Sample text/h4psample text/ph1示例文字/h1h2示例文字/h2h3示例文字/h3h4示例文字/h4p示例文字/p
/body
/html样式3
效果图
样式代码
!DOCTYPE html
html
style
html
{width: 100%;height: 100%;background-color: lightblue;background:linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),linear-gradient(-90deg, #aaa 1px, transparent 1px),linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),linear-gradient(#aaa 1px, transparent 1px),#f2f2f2;background-size:4px 4px,4px 4px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px,80px 80px;
}
/style
bodyh1Sample text/h1h2Sample text/h2h3Sample text/h3h4Sample text/h4psample text/ph1示例文字/h1h2示例文字/h2h3示例文字/h3h4示例文字/h4p示例文字/p
/body
/html样式4
效果图
样式代码
!DOCTYPE html
html
style
html
{width: 100%;height: 100%;background-color: lightblue;--grid-size: 30px;--grid-strength: 1px;--grid-dash: 10px;--grid-gap: 5px;--grid-color: #ddd;--paper-color: #fff;background-color: var(--paper-color);background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);background-image:linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)), linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));}
/style
bodyh1Sample text/h1h2Sample text/h2h3Sample text/h3h4Sample text/h4psample text/ph1示例文字/h1h2示例文字/h2h3示例文字/h3h4示例文字/h4p示例文字/p
/body
/html
