css实现彩色间断式下单下划线效果代码-html代码-BFW代码库

css实现彩色间断式下单下划线效果代码

代码语言：html

代码描述：css实现彩色间断式下单下划线效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .full-line {
          --b: 8; /* border thickness without unit */
          --g: repeating-linear-gradient(45deg,#BD1550 0 10px,#E97F02 0 20px,#F8CA00 0 30px);
          border-image: var(--g) var(--b)//0 100vw 0 0;
          border-bottom: calc(var(--b)*1px) solid;
          padding: 10px 0;
        }
        .right {
          border-image-outset: 0 0 0 100vw;
          width: fit-content;
        }
        h2.full-line {
          --b: 3;
          --g: repeating-linear-gradient(90deg,purple 0 15px,#0000 0 22px);
        }
        h2.full-line.right {
          --g: repeating-linear-gradient(-90deg,darkred 0 15px,#0000 0 22px);
        }
        h3.full-line {
          --b: 9;
          --g: linear-gradient(0deg,#C02942 3px,#0000 0 6px,#53777A 0);
        }
        section {
          /* center + max-width:800px + min-margin: 10px */
          margin-inline: max(10px, 50% - 800px/2);
          margin-block: 50px; 
        }
        body {
          font-family: system-ui, sans-serif;
          background: #eee;
        }
        h1 {
          font-size: 3rem;
        }
        p {
          font-s.........完整代码请登录后点击上方下载按钮下载查看