css linear-gradient 实现条纹样式

参考：《CSS SECRETS》Chapter 2-5
作者：Lea Verou

测试所用浏览器：Chrome
html :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style_stripe.css">
  <title>条纹样式</title>
</head>
<body>
    <!-- 水平-渐变样式 -->
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <!-- 水平-双色双条纹 -->
    <div class="box box3">box3</div>
    <!-- 水平-双色多条纹  -->
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <!-- 水平-多色多条纹 -->
    <div class="box box6">box6</div>
    <!-- 垂直-多色多条纹 -->
    <div class="box box7">box7</div>
    <!-- 斜45度-双色多条纹 -->
    <div class="box box8">box8</div>
    <!-- 斜45度-多色多条纹 -->
    <div class="box box9">box9</div>
    <!-- 斜60度-双色多条纹 -->
    <div class="box box10">box10</div>
</body>
</html>

css :

.box{
    display: inline-block;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 200px;
}

.box1{
    background: linear-gradient(red,green);
}

.box2{
    background: linear-gradient(red 20%, green 80%);
}

.box3{
    background: linear-gradient(red 50%, green 50%);
}

.box4{
   /* background要先于background-size使用，不然background-size会无效  */
    background: linear-gradient(red 50%, green 50%);
    background-size: 100% 20%;
}

.box5{
    /* 第二个颜色后的参数如果小于前者，则会被自动赋予与前者相同的值 */
    background: linear-gradient(red 20%, green 0);
    background-size: 100% 20%;
}

.box6{
    background: linear-gradient(red 33.3%, green 0, green 66.6%, blue 0);
    background-size: 100% 20%;
}

.box7{
    /* 也可以使用90deg */
    background: linear-gradient(90deg, red 33.3%, green 0, green 66.6%, blue 0);
    background-size: 20% 100%;
}

.box8{
    background: linear-gradient(45deg, red 25%, green 0, green 50%, red 0, red 75%, green 0);
    background-size: 20% 20%;
}

.box9{
    background: linear-gradient(45deg, red 16.7%, green 0, green 33.3%, blue 0, blue 50%, red 0, red 66.7%, green 0, green 83.3%, blue 0);
    background-size: 20% 20%;
}

.box10{
    background: repeating-linear-gradient(60deg, red, red 10%, green 0, green 20%);
}

效果如下图所示：
css linear-gradient 实现条纹样式