在网页设计中，我们经常需要创建各种视觉元素来增强页面的美观性和可读性。其中，水平分割线是一种常见的布局辅助元素。然而，当需求变得复杂，例如需要一条中间部分比两端更高、具有不同高度分段的水平线时，传统的css border 属性就显得力不从心了。单个 border-top 或 border-bottom 属性只能定义统一的边框厚度。为了实现这种分段式高度的边框线效果，我们需要一种更灵活的布局方法。
核心思路：Flexbox与多元素组合
解决这一问题的关键在于利用CSS的Flexbox布局模型，结合多个独立的HTML元素。我们可以将这条“线”视为由多个相邻的、具有不同边框厚度的矩形段组成。通过将这些矩形段放置在一个Flex容器内，并为每个段定义其宽度和边框厚度，就能精确地控制整体线条的形态。
具体步骤如下：
- 创建Flex容器： 一个父级 div 元素作为Flex容器，负责水平排列其子元素。
- 定义线条分段： 多个子级 div 元素，每个代表线条的一个分段。
- 应用边框样式： 为每个子元素设置 border-bottom（或 border-top），并根据设计需求调整其厚度（border-width）和颜色。
- 控制分段宽度： 为每个子元素设置百分比宽度，以实现响应式布局。
HTML结构搭建
首先，我们需要构建相应的HTML结构。一个主容器 div 包含三个子 div，分别代表左侧、中间和右侧的线条分段。
<!DOCTYPE html>
<html>
<head>
<title>分段式高度边框线示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main">
<div class="border-1"></div>
<div class="border-2"></div>
<div class="border-3"></div>
</div>
</body>
</html>CSS样式实现
接下来，我们将为上述HTML结构添加CSS样式。
立即学习“前端免费学习笔记（深入）”；
容器样式
main 容器负责启用Flexbox布局，并确保其子元素水平排列。
.main {
height: 100px; /* 示例高度，可根据需要调整 */
width: 100%;
display: flex; /* 启用Flexbox */
flex-direction: row; /* 子元素水平排列 */
align-items: center; /* 垂直居中对齐，确保所有边框线在同一水平线上 */
/* 注意：对于纯粹的水平线，align-items: center 并不是必须的，
但如果容器有高度且希望线条在其中垂直居中，则可以保留。
如果仅是线，可以省略 height 和 align-items。 */
}分段样式
为每个子 div 定义其边框样式和宽度。这里我们使用 border-bottom 来创建水平线，并设置不同的厚度来模拟高度变化。
.border-1 {
border-bottom: 2px solid #c3b69e; /* 左侧分段，2px厚度 */
width: 30%; /* 占据总宽度的30% */
}
.border-2 {
border-bottom: 5px solid #c3b69e; /* 中间分段，5px厚度 */
width: 40%; /* 占据总宽度的40% */
}
.border-3 {
border-bottom: 2px solid #c3b69e; /* 右侧分段，2px厚度 */
width: 30%; /* 占据总宽度的30% */
}请注意，这里 border-bottom 的颜色使用了 #c3b69e，与原始问题中的示意图颜色相符。您可以根据实际需求修改颜色。
完整代码示例
将HTML和CSS结合起来，您将得到以下完整的代码：
<!DOCTYPE html>
<html>
<head>
<title>分段式高度边框线示例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* 使示例在页面中央可见 */
background-color: #f0f0f0;
}
.main {
/* 示例中为了演示效果，给了一个固定高度。
实际应用中，如果只是作为一条线，可以不设置高度，
或者设置一个较小的高度如 line-height。
这里为了让边框可见，保留了 height。 */
height: 50px; /* 容器高度，确保边框线有足够的空间显示 */
width: 80%; /* 容器宽度，可根据需要调整 */
max-width: 600px; /* 最大宽度，保持美观 */
display: flex;
flex-direction: row;
align-items: flex-end; /* 使边框线在容器底部对齐，更像一条线 */
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素总尺寸 */
}
.border-1 {
border-bottom: 2px solid #c3b69e;
width: 30%;
}
.border-2 {
border-bottom: 5px solid #c3b69e;
width: 40%;
}
.border-3 {
border-bottom: 2px solid #c3b69e;
width: 30%;
}
</style>
</head>
<body>
<div class="main">
<div class="border-1"></div>
<div class="border-2"></div>
<div class="border-3"></div>
</div>
</body>
</html>设计与实现注意事项
- 响应式设计： 通过为 border-1, border-2, border-3 设置百分比宽度 (width: 30%; width: 40%;)，当父容器 main 的宽度发生变化时，这些分段的宽度也会按比例缩放，从而实现良好的响应式效果。max-width: 300px 或其他值可以用于限制中间部分的宽度，确保在宽屏设备上不会过长。
- 颜色与厚度调整： 您可以根据设计需求轻松修改 border-bottom 的 border-width 和 border-color。例如，将 gold 替换为任何有效的CSS颜色值，或调整像素值来改变线条的粗细。
- 方向选择 (border-top vs border-bottom)： 虽然原始问题提及 border-top，但本教程的解决方案使用了 border-bottom。这两种方式都可以创建水平线，选择哪种取决于您的具体设计需求，例如这条线是作为元素的顶部边界还是底部边界。在Flex容器中，align-items 属性可以帮助您将这些边框线对齐到容器的顶部 (flex-start)、底部 (flex-end) 或中心 (center)。
- 语义化： 这种方法在功能上非常有效，但在语义上，这些 div 元素仅仅是为了视觉呈现而存在。如果这条线有特定的结构或内容意义，可能需要考虑使用其他HTML元素或结合伪元素来增强语义。然而，对于纯粹的装饰性线条，这种方法是完全可接受的。
总结
利用CSS Flexbox布局和多个HTML元素，我们可以灵活地创建出具有不同高度分段的水平边框线。这种方法不仅能够满足复杂的视觉设计需求，而且通过使用百分比宽度，能够轻松实现响应式布局，确保在各种设备上都能呈现出预期的效果。通过调整边框厚度、颜色和分段宽度，开发者可以高度定制化这些线条，为网页设计带来更多可能性。
