条纹背景

背景知识： gradient (opens new window), linear-gradient (opens new window), radial-gradient (opens new window), repeating-linear-gradient (opens new window)

线性渐变linear-gradient是CSS3非常重要的一个模块，但在真实的开发中，我们并不常用，在这里，我举两个自己经常会用到的场景，分别是进度条和不规则卡片。

进度条

60%

<style>
  .main-stripes-background-line {
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .progress-outer {
    width: 60%;
    height: 12px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .progress-enter {  
    height: inherit;
    background: rgba(180, 160, 120, .2);
  }
  .progress-bg {
    width: 60%;
    height: inherit;
    border-radius: 6px;
    text-align: center;
    line-height: normal;
    font-size: 12px;
    background: repeating-linear-gradient(-45deg, #D9CFBB  25%, #C3B393 0, #C3B393 50%,
     #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
    background-size: 16px 16px;
    animation: panoramic 20s linear infinite;
  }
  @keyframes panoramic{
    to {
      background-position: 200% 0;
    }
  }
</style>
<template>
  <div class="main-stripes-background-line">
    <div class="progress-outer">
      <div class="progress-enter">
        <div class="progress-bg">60%</div>
      </div>
    </div>
  </div>
</template>

显示代码 复制代码 复制代码

不规则卡片

<style>
  .main-stripes-background-card {
    width: 100%;
    padding: 80px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .coupon-card {
    width: 200px;
    height: 120px;
    background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px);
  }
</style>
<template>
  <div class="main-stripes-background-card">
    <div class="coupon-card"></div>
  </div>
</template>

显示代码 复制代码 复制代码