css实现渐变下划线效果代码-html代码-BFW代码库

css实现渐变下划线效果代码

代码语言：html

代码描述：css实现渐变下划线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        /*---- RESET -----*/
        *, *::before, *::after {
          box-sizing: border-box;
        }
        
        h1, h2, h3, h4, h5, p {
          margin: 0;
        }
        
        ul, ol, li {
          margin: 0;
          padding: 0;
        }
        
        body {
          font-family: sans-serif;
          font-size: 1rem;
          line-height: 1.5;
        }
        
        
        /* ---- END RESET */
        
        :root {
          --bg: #222;
          --fg: #fff;
          
          --u1: hotpink;
          --u2: deepskyblue;
        }
        
        @media screen and (prefers-color-scheme: light) {
          :root {
            --bg: #fff;
            --fg: #111;
            
            --u1: deeppink;
            --u2: blue;
          }
        }
        
        /* ---- COLORS ---- */
        
        body {
          background: var(--bg);
          color: var(--fg);
          margin: 1rem auto;
          max-width: min(100% - 3rem, 800px);
        }
        
        
        /* ---- TYPOGRAPHY ---- */
        
        
        /* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
        
        :root {
          --step--2: clamp(0.91rem, calc(0.89rem + 0.10vw), 0.96rem);
          --step--1: clamp(1.09rem, calc(1.05rem + 0.21vw), 1.20rem);
          --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.50rem);
          --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem);
          --step-2: clamp(1.89rem, calc(1.71rem + 0.89vw), 2.34rem);
          --step-3: clamp(2.27rem, calc(2.01rem + 1.29vw), 2.93rem);
          --step-4: clamp(2.72rem, calc(2.36rem + 1.83vw), 3.66rem);
          --step-5: clamp(3.27rem, calc(2.75rem + 2.56vw), 4.58rem);
        }/* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
        
        :root {
          --step--2: clamp(0.91rem, calc(0.89rem + 0.10vw), 0.96rem);
          --step--1: clamp(1.09rem, calc(1.05rem + 0.21vw), 1.20rem);
          --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.50rem);
          --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem);
          --step-2: clamp(.........完整代码请登录后点击上方下载按钮下载查看