如何在没有 div 的 CSS 中设置边框长度

在没有 div 元素的情况下，我们仍然可以使用 CSS 设置元素的边框长度。以下是一些方法：

1. 使用伪元素 ::before 或 ::after

可以使用伪元素 ::before 或 ::after 来创建一个虚拟元素，并为其添加边框样式。例如，要创建一个带有 2 像素红色边框的元素：

.box::before {
  content: "";
  border: 2px solid red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这个方法的缺点是它不会影响元素的大小和位置，因此需要使用 position 和 top、left、right、bottom 属性来调整位置和尺寸。

2. 使用背景图片

可以使用背景图片来创建带边框的元素。生成一个宽为 100px、高为 50px、边框宽度为 5px、颜色为红色的 div，例如：

.box {
  width: 100px;
  height: 50px;
  background-image: linear-gradient(red, red), 
                  linear-gradient(red, red), 
                  linear-gradient(red, red), 
                  linear-gradient(red, red);
  background-position: 0 0, 0 0, 0 45px, 95px 0;
  background-size: 5px 100%, 100% 5px, 5px 100%, 100% 5px;
  background-repeat: no-repeat;
}

这个方法的缺点是它只能使用固定大小的边框，并且需要使用复杂的背景图片设置来实现。

3. 使用 SVG

可以使用 SVG 来创建一个带边框的元素。例如，要生成一个宽度为 100px、高度为 50px、边框宽度为 5px、颜色为红色的 div：

.box {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50'><rect x='0' y='0' width='100' height='50' stroke='red' stroke-width='5' fill='none'/></svg>");
  background-size: 100% 100%;
}

这个方法的缺点是需要在 CSS 中嵌入 SVG 代码，较为复杂。

综上，如果没有 div 元素，那么我们可以使用伪元素、背景图片或 SVG 等技巧来创建带边框的元素。