一、理解页眉横线的形成机制

在网页设计中，页眉横线通常由不同元素的边框、背景色或默认样式引发。理解其根源，有助于选择最适合你的方案。常见情况包括：

• 元素的下边框（border-bottom）
• 元素的底部边距（margin）或内边距（padding）影响视觉效果
• 浏览器的默认样式（如 hr 标签）
• 伪元素（::before、::after）设置的边框线

明确这些基础，可以帮助你进行有效的样式覆盖或移除操作。

二、最直接的方案：重置或覆盖边框样式

1. 通过 CSS 重置边框

/* 移除所有元素的边框 */
* {
    border: none !important;
}

此方法最具普适性，但可能会影响页面其他元素，建议结合具体选择器使用。

2. 针对特定页眉元素覆盖边框

/* 只移除页眉元素的横线，例如 header */
header {
    border-bottom: none !important;
}

这种方式灵活，避免影响其他内容。

三、隐藏 hr 标签的横线效果

hr 标签是引入横线最常见的方法之一。可以通过设置样式来隐藏线条：

hr {
    border: none;
    height: 0;
}

删除border和高度，即可使hr无线条显示。

四、利用伪元素隐藏或删除横线

有时横线由伪元素产生，比如利用 ::after 伪元素绘制边线。例如：

/* 禁用伪元素产生的横线 */
.header::after {
    display: none;
}

此方法适合你有自定义伪元素控制的场景。

五、使用背景色或边距弥补视觉横线

如果不方便彻底移除边框，可以考虑用背景色覆盖或者调整布局：

header {
    background-color: #fff;  /* ペ背景与页面整体色调协调 */
    padding-bottom: 0;
    border-bottom: none;
}

此方案可以避免影响布局结构，适合微调场景。

六、特殊情况：兼容性与优先级控制

CSS 优先级（ specificity ）确保你的修改生效，必要时加入 !important 标签，但不要滥用。

/* 增强优先级 */
.page-header {
    border: none !important;
}

在复杂布局中，增加选择器强度保证样式覆盖成功。