CSS单容器线性渐变：尺寸适配、重复渐变及垂直居中问题

完全可以用单个div实现所有需求，核心是结合repeating-linear-gradient、background-size和background-position属性来实现，具体方案如下：

核心思路 #

• 黑线窄于容器：通过background-size控制渐变图案的宽度，使其小于容器宽度
• 替代手动重复分段：用repeating-linear-gradient定义重复的「黑线+透明」单元，自动重复
• 未知高度下垂直居中：利用background-position: center让渐变图案在容器内垂直居中，不受容器高度影响

完整代码示例 #

:root {
  --line-height: 0.1rem;    /* 单条黑线高度 */
  --gap-height: 0.2rem;     /* 黑线之间的透明间隔高度 */
  --line-width: 40px;       /* 黑线宽度（小于容器的50px） */
}
html { font-size: 62.5% }
div {
  width: 50px;
  height: 20.0rem; /* 可任意修改高度，居中效果不受影响 */
  background-color: rgb(200,200,200);
  /* 定义重复的渐变单元：黑线+透明间隔 */
  background-image: repeating-linear-gradient(
    to bottom,
    black 0,
    black var(--line-height),
    transparent var(--line-height),
    transparent calc(var(--line-height) + var(--gap-height))
  );
  /* 设置渐变图案的尺寸：宽度为黑线宽度，高度为单个重复单元的总高度 */
  background-size: var(--line-width) calc(var(--line-height) + var(--gap-height));
  /* 让渐变图案在容器内垂直+水平居中 */
  background-position: center;
  /* 垂直重复渐变图案 */
  background-repeat: repeat-y;
}

<div></div>

关键细节说明 #

1. 黑线宽度控制：background-size的第一个值var(--line-width)设置为40px，小于容器的50px，实现黑线窄于容器的效果
2. 自动重复分段：repeating-linear-gradient只需要定义一个「0.1rem黑线+0.2rem透明」的单元，浏览器会自动重复这个单元填充垂直方向
3. 垂直居中适配：background-position: center让整个渐变图案的中心点与容器中心点对齐，无论容器高度如何修改，黑线组始终保持垂直居中

内容的提问来源于stack exchange，提问作者Gary