首页html下划线颜色渐变

html下划线颜色渐变

时间: 2023-10-20 09:34:02 浏览: 62

要实现HTML中下划线的颜色渐变效果，可以借助CSS的线性渐变（linear gradient）属性。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> .gradient-underline { background-image: linear-gradient(to right, red, blue); background-repeat: no-repeat; background-position: bottom; background-size: 100% 2px; } </style> </head> <body> <h1 class="gradient-underline">Hello, world!</h1> </body> </html> ``` 在上面的代码中，我们定义了一个名为 `.gradient-underline` 的CSS类，通过 `linear-gradient` 属性创建了一个从红色到蓝色的线性渐变背景图片。然后，我们使用 `background-repeat: no-repeat;` 来防止重复， `background-position: bottom;` 来将背景图片放置在下方， `background-size: 100% 2px;` 来设置背景图片的尺寸为宽度占满整个元素，高度为2个像素。最后，我们将这个类应用到 `<h1>` 标签上，实现了标题下方的颜色渐变下划线效果。你可以根据需要调整渐变的起始颜色、结束颜色和方向，来实现不同样式的下划线渐变效果。