6

我有一个居中的 div，里面有一个嵌套的 h1。有没有办法用比 html 默认值更粗的线来强调它？

4

5 回答 5

15

这将使您能够控制U标签的下划线：

<style type="text/css">
  u {
    text-decoration: none;
    border-bottom: 4px solid black;
  }
</style>

在这种情况下，下划线将是四个像素。

于 2010-06-28T18:05:24.537 回答
6

不，没有。下划线的粗细取决于浏览器，在 CSS（或 HTML）中不会受到影响。

text-underline-widthCSS3 文本草案中曾经建议过一个属性。但兴趣不足，2005年从草案中删除，可能从未实施过。

通常的解决方法是使用底部边框而不是下划线。但是，请注意，这是另一回事。底部边框位于行框下方，而下划线通常位于文本的基线上，因此会切断字母的下行。一般来说，底部边框比下划线更易读，但它偏离了印刷传统。

下面的示例演示了这些差异。

<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>

于 2015-02-07T13:45:21.260 回答
4

我不推荐内联 CSS，但为了简洁起见在这里使用它：

<h1 style="border-bottom: 5px solid black">
于 2010-06-28T18:00:02.783 回答
0

你也许可以用border-bottom-width达到同样的视觉效果；

h2
{
  border-bottom-color:black;
  border-bottom-style:solid;
  border-bottom-width:15px;
}d
于 2010-06-28T18:00:02.877 回答
0

由于您并不总是想要border-bottom（例如，项目可能有填充并且它会显得太远），这种方法效果最好：

h1:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

如果您想要更粗的下划线，请添加更多height

如果您希望文本和下划线之间有更多或更少的空间，请添加margin-top：

h1:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}
于 2016-06-20T11:22:51.257 回答