[分享]css下划线变成虚线

在CSS中，我们可以通过textdecoration属性来给文字添加下划线。默认情况下，下划线是实线（solid）的，但是有时候我们希望下划线变成虚线（dashed）的，这时就需要用到CSS的边框属...

在CSS中，我们可以通过text-decoration属性来给文字添加下划线。默认情况下，下划线是实线（solid）的，但是有时候我们希望下划线变成虚线（dashed）的，这时就需要用到CSS的边框属性（border）。

 text-decoration: none;
    border-bottom: 1px dashed #000; 

上面的代码中，我们在text-decoration属性中指定不要显示下划线，然后在border-bottom属性中把文字下方的边框设置为虚线（dashed）样式，颜色为黑色（#000）。

如果想要下划线变成点状的虚线（dotted），只需要把border-bottom的样式改为dotted即可：

 text-decoration: none;
    border-bottom: 1px dotted #000; 

最后要注意的一点是，使用border来模拟下划线只是一种hack的做法，它有可能影响到其他元素的布局和排版。因此，在实际开发中，我们建议只在特殊情况下使用。