断弯刀

导航

css给文字加下划线

语法：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> 

                                         红色下划线

posted on 2018-10-16 11:04  断弯刀  阅读(3203)  评论(0)  编辑  收藏  举报