语法：linear-gradient(direction, color-stop 1, color-stop 2,……）
简单用法：background-image: linear-gradient(red, transparent);
增加角度，linear-gradient(45deg, red, transparent)
加个position：linear-gradient(45deg, red, transparent 45%)
加个colorlinear-gradient(45deg, red, transparent 45%,red)
linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)
linear-gradient(135deg, transparent 45%, red 55%, transparent 60%)
把这两个线结合达到波浪线效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .down{ position: relative; } .down:after{ content: ''; position: absolute; bottom: -2px; left: 5%; width: 90%; height: 2px; background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red 55%, transparent 55%, transparent 100%) ,-webkit-linear-gradient(45deg, transparent, transparent 45%, red 55%, transparent 55%, transparent 100%); background-size: 4px 4px; background-repeat: repeat-x; } </style> </head> <body> <span class="down">燃情岁月</span> </body> </html>
示例：
<span style="border-bottom: 1px solid #F00;">红色下划线</span>
红色下划线