css 条纹背景

前言

今天阅读了CSS揭秘 第五章 条纹背景，来写一下这一章学到东西吧。

正文

这章学到了一个新的属性repeating-linear-gradient。 关于linear-gradient的东西可以看我的这篇文章。

我们可以用linear-gradient实现任何角度的条纹，并且通过background-size来控制重复比例，以达到实现斜向条纹的目的

.demo {
    width: 200px;
    height: 100px;

    margin: 50px auto;
}
.strip1 {
    background-image: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);

    background-size: 20px 20px;
}

<div class="demo strip1"></div>

这是效果

但是如果我们需要指定条纹的宽度呢？比如说条纹宽度均为15px

background-image: linear-gradient(45deg, #fb3 15px, #58a 0, #58a 30px, #fb3 0, #fb3 45px, #58a 0);

background-size: 42px 42px;

我们这时候需要根据斜向的角度 以及条纹的宽度来计算需要的size大小，（勾股定理参上）。 比如代码中的45度角和15px宽。 那么

size = 15 * 1.414（根号2的近似值） * 2(两种条纹，宽度均为15px) 

是不是感觉很麻烦，并且如果有改动的话，需要重新计算并且涉及多个改动。

这时候我们可以使用 repeating-linear-gradient来帮忙。它会无限重复色标直到铺满整个元素。 那么上面两行代码等同于

background-image: repeating-linear-gradient(45deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);

这行代码相当于

background-image: linear-gradient(45deg,
                                                
                       #fb3 0, #fb3 15px, #58a 0, #58a 30px,
                       #fb3 0, #fb3 45px, #58a 0, #58a 60px,
                       #fb3 0, #fb3 75px, #58a 0, #58a 90px,
                       ...
                );

细看之下 你可以发现上面的一副(我们通过条纹宽度和角度计算所得的条纹)存在锯齿，下面的那份(通过repeating-linear-gradient)就没有这个问题， 并且条纹的宽度，颜色，以及数量如果发生改变， 我们需要改动的地方就相对简单了不少。

结语

从今天起，每读到好的部分都会记录下来，希望自己能有所进步，加油。