css实现线条渐变条纹效果代码-html代码-BFW代码库

css实现线条渐变条纹效果代码

代码语言：html

代码描述：css实现线条渐变条纹效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css">
  
<style>
@layer base, support, demo;


@layer demo {
  .gradient-stripes {
    --direction: to top right;
    --stripe-size: 2px;
    --stripe-gap: 15px;
      
    -webkit-mask: repeating-linear-gradient(
      var(--direction), 
      black, black var(--stripe-size), 
      transparent 0%, transparent var(--stripe-gap)
    );
      
            mask: repeating-linear-gradient(
      var(--direction), 
      black, black var(--stripe-size), 
      transparent 0%, transparent var(--stripe-gap)
    );
  }
  
  .gradient-stripes:nth-child(1) {
    background: var(--gradient-18);
    --direction: to bottom right;
  }
  .gradient-stripes:nth-child(2) {
    background: var(--gradient-1);
    --direction: to right;
  }
  .gradient-stripes:nth-child(3) {
    background: var(--gradient-3);
    --direction: to bottom left;
  }
  .gradie.........完整代码请登录后点击上方下载按钮下载查看