css下划线 虚线 一样长

CSS下划线和虚线可以很好地增强网站的可读性和美感，下面为大家介绍一下如何实现这些效果。

 /* 下划线 */ 
div {
   border-bottom: 2px solid black;
}

 /* 虚线 */ 
div {
   border-bottom: 2px dashed black;
}

上述代码展示了如何使用CSS实现下划线和虚线。可以看到，只需设置border-bottom属性即可实现下划线，其中边框样式可以是实线（solid）、虚线（dashed）等，颜色也可以自定义。

但是，有时候下划线会因为文字长度的不同而产生不一样的长度，影响美观度。我们可以采用以下方法来解决这个问题：

 /* 一样长的下划线 */ 
div {
   display: inline-block; /* 把div转换成行内元素，使下划线长度随内容变化 */
   border-bottom: 2px solid black; /* 下划线样式 */
   line-height: 30px; /* 设置div高度 */
   padding: 0 5px; /* 设置div内边距，防止下划线与文字重叠 */
}

通过将div转换成行内元素，并改变行高和内边距的方式，下划线的长度就可以与内容保持一致，美观度也会增加。

以上就是关于CSS下划线和虚线的介绍，希望对大家有所帮助。