HTML以及编辑的Markdown如何设置下划线样式

本篇文章就给大家介绍css添加文字下划线样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

常规办法

1
<u>这里是常规办法添加下划线</u>

效果如下：

这里是常规办法添加下划线

text-decoration属性

1
<span style="text-decoration:underline">这是text-decoration属性设置的下划线。</span>

效果如下：

这是text-decoration属性设置的下划线。

border-bottom属性

border-bottom属性使用起来比较灵活，并且可以设置线的格式，因此能满足你一篇文章的不同需求~~~

1
2
3
4
5
<p>这是第实线样式，<span style="border-bottom: 1px solid #000000;">Mming‘s Blog</span>! </p> 
<p>这是变粗的实线，<span style="border-bottom: 5px solid #0081EF;">Mming‘s Blog</span>! </p>
<p>这是虚线样式，<span style="border-bottom: 2px dashed #000000;">Mming‘s Blog</span>! </p>
<p>这是虚点下划线，<span style="border-bottom: 2px dotted #000000;">Mming‘s Blog</span>! </p>
<p>这是双下划綫，<span style="border-bottom: 5px double #000000;">Mming‘s Blog</span>! </p>

效果如下：

这是第实线样式，Mming‘s Blog!

这是变粗的实线，Mming‘s Blog!

这是虚线样式，Mming‘s Blog!

这是虚点下划线，Mming‘s Blog!

这是双下划线，Mming‘s Blog!

border-bottom属性可以通过控制线的粗细、颜色、样式来实现不同的文字下划线样式。此外还有如下边框样式供参考⬇️ ：

  • groove: 定义3D沟槽边框。效果取决于边框的颜色值
  • ridge: 定义3D脊边框。效果取决于边框的颜色值
  • inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
  • outset: 定义一个3D突出边框。 效果取决于边框的颜色值

以上就是在HTML或者支持HTML的markdown文件中给文字添加下划线的方式，简单处理可以直接使用u标签，对下划线格式有要求时可以使用border-bottom属性对下划线进行设置。