一、引言：传统边框的局限性
在网页设计中，我们经常需要创建各种分隔线或装饰性横线。最常见的做法是使用css的border-top或border-bottom属性。然而，这些属性只能为单个元素应用统一高度的边框。当需要实现一条横线，其不同部分的粗细（高度）不一致，例如中间粗两边细的效果时，传统的border属性就显得力不从心了。此时，我们需要更灵活的布局和样式组合来实现这一视觉目标。
二、核心思路：分段式布局与Flexbox
要创建一条中间高两边低的横线，核心思想是将这条“线”视为由多个独立的、并排排列的段落组成。每个段落可以拥有自己的边框高度。CSS Flexbox（弹性盒子布局）是实现这种分段式布局的理想工具，因为它能轻松地将多个子元素水平排列，并灵活控制它们的宽度和对齐方式。
具体步骤如下：
- 创建容器： 使用一个父级div作为Flex容器，用于包裹所有横线段落。
- 创建段落元素： 在容器内部创建多个子div元素，每个子div代表横线的一个段落（例如，左侧、中间、右侧）。
- 应用边框： 对每个子div应用border-bottom属性，设置不同的border-width来控制其高度，并保持border-color一致。
- Flexbox布局： 利用Flexbox属性（如display: flex、justify-content、align-items）来控制这些段落的水平排列和垂直对齐。
- 宽度控制： 通过设置子元素的width属性（可以是百分比或固定值）来控制每个段落在横线中的占比。
三、实现步骤与示例代码
下面我们将通过具体的HTML和CSS代码来演示如何实现这种分段式横线。
3.1 HTML 结构
首先，我们需要一个主容器和三个子元素，分别代表左侧、中间和右侧的横线段落。
立即学习“前端免费学习笔记（深入）”；
分段式高度横线
3.2 CSS 样式
接下来，我们编写CSS来布局这些元素并应用边框样式。
/* style.css */
body {
margin: 0;
padding: 20px; /* 示例，提供一些页面留白 */
font-family: sans-serif;
background-color: #f8f8f8;
}
.main-line-container {
height: 50px; /* 为容器设置一个高度，以便更好地观察边框 */
width: 100%; /* 容器宽度 */
display: flex; /* 启用Flexbox布局 */
flex-direction: row; /* 子元素水平排列，默认值，但明确写出更清晰 */
align-items: flex-end; /* 将所有子元素的边框底部对齐 */
/* 注意：如果子元素没有高度，只依赖border-bottom，
align-items: center 或 flex-start/flex-end 效果可能不明显。
这里主要通过 border-bottom 来“画线”，子元素本身高度可以为0。
我们让边框底部对齐，以确保线在同一水平线上。
*/
}
.line-segment {
border-bottom-color: #c3b69e; /* 统一边框颜色 */
border-bottom-style: solid; /* 统一边框样式 */
/* 子元素默认高度为0，边框即是其可见部分 */
}
.left-segment {
border-bottom-width: 2px; /* 左侧边框高度 */
width: 30%; /* 左侧宽度占比 */
}
.middle-segment {
border-bottom-width: 5px; /* 中间边框高度 */
width: 40%; /* 中间宽度占比 */
}
.right-segment {
border-bottom-width: 2px; /* 右侧边框高度 */
width: 30%; /* 右侧宽度占比 */
}代码解释：
- .main-line-container：被设置为display: flex，使其子元素水平排列。align-items: flex-end确保所有边框的底部在同一水平线上。
- .line-segment：这是一个基础样式类，用于统一设置所有段落的边框颜色和样式，提高代码的可维护性。
- .left-segment, .middle-segment, .right-segment：这些类分别设置了不同段落的border-bottom-width（即边框高度）和width（宽度占比）。通过调整这些值，可以精确控制横线的视觉效果。
四、注意事项与优化
- 颜色与样式统一： 确保所有段落的border-bottom-color和border-bottom-style保持一致，以形成一条连贯的线。可以通过一个基础类来统一管理这些属性。
-
响应式设计：
- 百分比宽度： 示例中使用了百分比宽度（30%、40%、30%），这意味着横线会根据其父容器的宽度自动缩放，从而实现基本的响应式效果。
-
固定中间宽度与两侧自适应： 如果希望中间段落有一个最大宽度（例如300px），而两侧自动填充剩余空间，可以这样调整：
.main-line-container { /* ... 其他Flexbox属性 ... */ justify-content: center; /* 让中间部分居中 */ } .left-segment, .right-segment { flex-grow: 1; /* 两侧自动填充剩余空间 */ width: auto; /* 取消固定宽度 */ } .middle-segment { width: auto; /* 允许内容决定宽度或max-width */ max-width: 300px; /* 中间部分的最大宽度 */ flex-shrink: 0; /* 防止中间部分在空间不足时收缩 */ flex-grow: 0; /* 防止中间部分在空间有余时扩张 */ }这种方式结合了max-width和flex-grow，使得中间部分在达到最大宽度后保持固定，而两侧则灵活调整。
- 媒体查询： 对于更复杂的响应式需求，可以使用媒体查询（@media）在不同屏幕尺寸下调整各段落的宽度或边框高度。
-
语义化与可访问性：
- 如果这条线纯粹是装饰性的，使用div是完全可以接受的。
- 如果它具有某种语义含义（例如，作为文章的分割线），可以考虑使用hr元素，并通过伪元素或更复杂的CSS技巧来修改hr的样式，但这通常比Flexbox方法更复杂。对于这种特定效果，Flexbox方案更直接。
-
可维护性： 使用CSS变量（Custom Properties）来管理边框颜色和宽度，可以使代码更易于修改和维护。
:root { --line-color: #c3b69e; --line-height-side: 2px; --line-height-middle: 5px; } .line-segment { border-bottom-color: var(--line-color); /* ... */ } .left-segment, .right-segment { border-bottom-width: var(--line-height-side); } .middle-segment { border-bottom-width: var(--line-height-middle); } - 替代方案（简述）： 虽然Flexbox方案简洁高效，但也有其他方法可以实现类似效果，例如使用SVG来绘制路径，或者利用::before/::after伪元素在单个元素上叠加多层背景或边框，但这些方法通常会增加复杂性。
五、总结
通过将一条横线拆分为多个独立的Flex子项，并为每个子项应用不同高度的border-bottom，我们可以轻松实现中间高两边低的独特横线效果。Flexbox的强大布局能力确保了这种设计不仅易于实现，而且具有良好的响应式特性。掌握这种技巧，将为你的网页设计带来更多创意和灵活性。
