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">
  
  
  
<style>
@layer demo {
  .gradient-shaper {
    shape-outside: linear-gradient(var(--angle, 45deg), black, transparent);
    shape-image-threshold: var(--threshold, .5);
    
    /* debug */
    background: linear-gradient(var(--angle, 45deg), red, transparent var(--threshold-size, 50%));
    
    float: left;
    width: 150px;
    height: 150px;
  }
  
  p {
    max-inline-size: 40ch;
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 5vmin;
  }
  
  footer {
    display: grid;
    gap: 1ch;
    
    > label {
      display: flex;
      place-items: center;
      gap: 1ch;
    }
  }
}
</style>

  
  
  
</head>

<.........完整代码请登录后点击上方下载按钮下载查看