我有一个居中的div,里面嵌套了一个h1。有没有办法用比html默认值更粗的线来给它加下划线?
enxuqcxy1#
这将给予您可以控制U标记的下划线:
U
<style type="text/css"> u { text-decoration: none; border-bottom: 4px solid black; } </style>
在这种情况下,下划线将是四个像素。
kcwpcxri2#
没有。下划线的粗细取决于浏览器,在CSS(或HTML)中不会受到影响。在CSS3文本草案中曾经有一个text-underline-width属性,但人们对它的兴趣不够,它在2005年被从草案中删除。它可能从未实现过。通常的解决方法是使用下边框而不是下划线。但是,请注意,这是另一回事。下边框位于行框下方,而下划线通常位于文本的基线上,因此会切断字母的下降部分。通常,下边框比下划线更容易阅读,但它偏离了印刷传统。下面的示例演示了这些差异。
text-underline-width
<span style="text-decoration: underline">jgq</span> <span style="border-bottom: solid 1px">jgq</span> <span style="border-bottom: solid 4px">jgq</span>
k4emjkb13#
我不推荐使用内联CSS,但为了简洁起见,我在这里使用了它:
<h1 style="border-bottom: 5px solid black">
vs3odd8k4#
你也许可以用边框-底部-宽度来达到同样的视觉效果;
h2 { border-bottom-color:black; border-bottom-style:solid; border-bottom-width:15px; }
l7wslrjt5#
可以。添加此属性以设置所需的厚度
text-decoration-thickness: 5px;
pgky5nke6#
因为你并不总是想要底部边框(例如,项目可能有填充,它会显得太远),这种方法效果最好:
h1:after { content: ''; height: 1px; background: black; display:block; }
如果想要更粗的下划线,请添加更多height如果你想在文本和下划线之间增加或减少空间,可以添加一个margin-top:
height
margin-top
h1:after { content: ''; height: 2px; background: black; display:block; margin-top: 2px; }
6条答案
按热度按时间enxuqcxy1#
这将给予您可以控制
U
标记的下划线:在这种情况下,下划线将是四个像素。
kcwpcxri2#
没有。下划线的粗细取决于浏览器,在CSS(或HTML)中不会受到影响。
在CSS3文本草案中曾经有一个
text-underline-width
属性,但人们对它的兴趣不够,它在2005年被从草案中删除。它可能从未实现过。通常的解决方法是使用下边框而不是下划线。但是,请注意,这是另一回事。下边框位于行框下方,而下划线通常位于文本的基线上,因此会切断字母的下降部分。通常,下边框比下划线更容易阅读,但它偏离了印刷传统。
下面的示例演示了这些差异。
k4emjkb13#
我不推荐使用内联CSS,但为了简洁起见,我在这里使用了它:
vs3odd8k4#
你也许可以用边框-底部-宽度来达到同样的视觉效果;
l7wslrjt5#
可以。添加此属性以设置所需的厚度
pgky5nke6#
因为你并不总是想要底部边框(例如,项目可能有填充,它会显得太远),这种方法效果最好:
如果想要更粗的下划线,请添加更多
height
如果你想在文本和下划线之间增加或减少空间,可以添加一个
margin-top
: