绘制 CSS 条总是有起点线和终点线的网格线

Question

在 CSS 中绘制 vertical/horizontal 行，因此无论参数（网格大小、线宽、视口纵横比）如何，第一行和最后一行始终可见。

代码

html, body{ height: 100% }
body {
  --thickness: 5px;
  --grid: 10; 
  
  background-image: linear-gradient(0deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg, red var(--thickness), transparent 0);
  
  background-size: calc(100/var(--grid)*1%) calc(100/var(--grid)*1%);
}

Codepen playground

Answer 1

我认为您没有在计算中考虑线宽。通过使用 100，最后一行在它应该开始的时候开始，但它的宽度没有显示。

如果我使用 background-size:calc(99.7/var(--grid)*1%) calc(100/var(--grid)*1%); }

显示最后一行。它很简陋，但它给了你想法。

Answer 2

您需要考虑最后几行的线条粗细。因此，每个图块的宽度计算结果为：(width of the box - thickness) / number of tiles，显然高度也类似。

html, body{ height: 100% }
body {
  display: flex;
}
.foo {
  box-shadow: 0 0 0 12px #EEE;
  width: 313px;
  height: 167px;

  margin: auto;
  --thickness: 5px;
  --grid: 9; 

  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg, red var(--thickness), transparent 0);
  
  background-size: calc((100% - var(--thickness))/var(--grid)) calc((100% - var(--thickness))/var(--grid));
}

<div class="foo"></div>

Answer 3

只需添加透明边框即可解决问题：

body {
  --thickness: 5px;
  --grid: 10; 
  margin:0;
  height:100vh;
  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg , red  var(--thickness), transparent 0);
  
  background-size: calc(100%/var(--grid)) calc(100%/var(--grid));
  border-style:solid;
  border-color:transparent;
  border-width:0 var(--thickness) var(--thickness) 0;
  box-sizing:border-box;
}

html {
  background:#fff;
}

使用伪元素不打扰内容：

body {
  --thickness: 5px;
  --grid: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg , red  var(--thickness), transparent 0);
  
  background-size: calc(100%/var(--grid)) calc(100%/var(--grid));
  border-style:solid;
  border-color:transparent;
  border-width:0 var(--thickness) var(--thickness) 0;
}

重复渐变的代码更少：

body {
  --thickness: 5px;
  --grid: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  --g:0 var(--thickness), transparent 0 calc(100%/var(--grid));
  background: 
    repeating-linear-gradient(180deg, blue var(--g)),
    repeating-linear-gradient(90deg,  red  var(--g));
  border-style:solid;
  border-color:transparent;
  border-width:0 var(--thickness) var(--thickness) 0;
}

如果您更改 background-origin:

，填充也可以解决问题

body {
  --thickness: 5px;
  --grid: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  --g:0 var(--thickness), transparent 0 calc(100%/var(--grid));
  background: 
    repeating-linear-gradient(180deg, blue var(--g)),
    repeating-linear-gradient(90deg,  red  var(--g));
  background-origin:content-box;
  padding:0 var(--thickness) var(--thickness) 0;
}

为了好玩另一个版本使用 conic-gradient:

body {
  --th: 5px;
  --n: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: conic-gradient(from 90deg at var(--th) var(--th),transparent 90deg, red 0 180deg, blue 0); 
  background-size:calc(100%/var(--n)) calc(100%/var(--n)); 
  background-origin:content-box;
  padding:0 var(--th) var(--th) 0;
}

绘制 CSS 条总是有起点线和终点线的网格线

draw CSS grid lines which always have start and end lines

css

linear-gradients

代码

Codepen playground