🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：使用border-bottom为标题下方添加边框

📝 使用场景

这个模板演示了如何使用CSS中的border-bottom属性在标题下方添加边框。

📘 解释

上面的CSS代码使用border-bottom属性在h1元素下方添加了一个边框。您可以根据需要调整颜色和厚度。

🔹 部分代码

标题 
<h1>标题</h1>

<style>
  h1 {
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
  }
</style>

💻 完整HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS: 使用border-bottom为标题下方添加边框</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    h1 {
      border-bottom: 2px solid #000;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>标题</h1>
  <p>这个模板演示了如何使用CSS中的<tag>border-bottom<tag>属性在标题下方添加边框。</p>
</body>
</html>

💻 完整功能代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS: 使用border-bottom为标题下方添加边框</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    h1 {
      border-bottom: 2px solid #000;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>标题</h1>
  <p>这个模板演示了如何使用CSS中的<tag>border-bottom<tag>属性在标题下方添加边框。</p>
</body>
</html>
已复制！

🎨 标题设计的实用技巧

使用 border-bottom 为标题添加装饰，是一种有效的方法，不仅可以清晰地划分内容区域，还能呈现出优雅洗练的设计。恰当的下划线样式能清晰表达内容的层级结构。

🌈 多样化的设计风格

除了基本的实线（solid），还可以使用 dotted（点线）、dashed（虚线）或 double（双线）。颜色方面也可以根据网站主题进行调整，如使用 #3498db（蓝色）或 #e74c3c（红色）代替默认的 #000（黑色）。

📏 最佳尺寸设置

边框线的粗细一般建议在 1px～3px 之间，可通过 padding-bottom 调整文本与下划线之间的间距。针对不同级别的标题（h1～h6）设定不同粗细有助于更清晰地展示信息层次，例如 h1 用 3px，h2 用 2px。

✨ 高级装饰技巧

可以使用 linear-gradient() 实现渐变线条效果，或搭配 box-shadow 增加立体感。此外，使用 ::after 等伪元素还能创造出具有原创性的设计风格。

标题线条装饰在内容视觉引导上起着重要作用，但若过度使用，反而可能影响可读性。建议保持全站风格一致，并仅在关键部分适当使用，以达到最佳效果。

相关模板