一、text-decoration:none的作用

text-decoration:none是CSS属性之一，用于去除文本的下划线、删除线、上划线等修饰线。一般常用于调整链接的样式。比如以下是普通链接与使用text-decoration:none后的链接样式：

a:link {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

二、text-decoration:none的变体

text-decoration:none有多种变体，包括text-decoration-line、text-decoration-style、text-decoration-color。可以通过这些变体来进一步定制我们想要的文本修饰效果。以下是text-decoration-line的取值和效果对比：

/* 去除所有修饰线 */
text-decoration-line: none;
/* 添加下划线 */
text-decoration-line: underline;
/* 添加删除线 */
text-decoration-line: line-through;
/* 添加上划线 */
text-decoration-line: overline;

以下是text-decoration-style的取值和效果对比：

/* 实线 */
text-decoration-style: solid;
/* 虚线 */
text-decoration-style: dotted;
/* 双实线 */
text-decoration-style: double;
/* 波浪线 */
text-decoration-style: wavy;

以下是text-decoration-color的效果对比：

text-decoration-color: blue;
text-decoration-color: red;

三、text-decoration:none的使用技巧

在实际开发中，可以运用一些技巧来更加灵活地使用text-decoraion:none。比如：

配合:hover使用，让鼠标悬停时的链接样式更加流畅；
与伪元素结合使用，来实现自定义修饰效果；
与其他属性搭配使用，来实现更加复杂的修饰效果。

四、小技巧演示

1、悬停时自动改变颜色

a:hover {
    color: blue;
    text-decoration: none;
}

2、自定义修饰

a::before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: black;
    position: absolute;
    left: 0;
    bottom: -3px;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
a:hover::before {
    transform: scaleX(1);
}

3、横线与垂直线相结合

通过使用linear-gradient来实现横线与垂直线相结合的效果。

/* 横线 */
background-image: linear-gradient(0deg, black, black), linear-gradient(0deg, red, red);
background-size: 0 3px, 100% 1px;
background-repeat: no-repeat;
/* 垂直线 */
background-image: linear-gradient(90deg, black, black), linear-gradient(90deg, red, red);
background-size: 3px 0, 1px 100%;
background-repeat: no-repeat;

五、总结

text-decoration:none是CSS中常用的属性之一，用于去除文本的下划线、删除线、上划线等修饰线。同时还可以通过text-decoration-line、text-decoration-style、text-decoration-color等变体来进一步定制我们想要的文本修饰效果。在实际开发中，可以灵活运用text-decoration:none来实现不同的修饰效果。

text-decoration:none详解