如何为通过background属性添加的线条设置上下两侧缩进？

当然可以实现上下双缩进，你只需要调整background属性里的尺寸和位置参数即可，这里提供两种方案：

方法一：直接修改背景属性 #

你原来的代码中，线条高度设为calc(100% - 60px)并对齐区块底部，因此只有顶部产生60px缩进。要实现上下各60px的缩进，需要：

1. 将线条高度改为calc(100% - 120px)（减去上下各60px的总长度）
2. 背景位置从center bottom调整为center 60px（让线条从顶部往下60px的位置开始）

修改后的.block2 CSS代码：

.block2 {
  position: relative;
  height: 600px;
  background: linear-gradient(45deg, red, orange) center 60px / 2px calc(100% - 120px) no-repeat;
}

方法二：使用伪元素（扩展性更强） #

如果后续需要对线条做更多样式调整，伪元素是更灵活的选择，通过直接设置上下距离实现缩进：

.block2 {
  position: relative;
  height: 600px;
}

.block2::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 60px;
  bottom: 60px; /* 直接定义底部缩进 */
  width: 2px;
  background: linear-gradient(45deg, red, orange);
  transform: translateX(-50%); /* 保持水平居中 */
}

两种方案都能实现你想要的上下双缩进效果，第一种简洁直接，第二种更便于后续样式扩展。

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