[css 揭秘] ：CSS揭秘 技巧：条纹背景

Posted 2020-09-03

条纹背景

https://github.com/FannieGirl/ifannie/
问题：条纹背景 在设觉设计中无处不在，我们真的可以用css 创建图案吗？

这一章相对还是比较复杂的哦！一起get.
首先我们做一个渐变的背景

横条背景

现在我们把这两个色标拉近一点

这样好像条纹背景 就出来了哦！不过这是横向的，是不是还可以竖线呢！肯定是可以的啦，看看多变的条纹背景

竖条背景

斜向背景

这样的条纹背景还是不够灵活的。还有更好的方案

liear-gradient() 和 radial-gradient() 还各有一个循坏的加强版：repeating-liear-gradient() 和 repeating-radial-gradient() 他们的工作方式是跟前两者类似的，但是不同点是：色标是无线循环重复的，直到填满整个背景。

灵活的同色系条纹

一般情况下，我们想要的条纹图案并不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系，只是在明度方面有着轻微的差异

实例演示地址：https://jsfiddle.net/06sjmL6n/13/

后言：
如果你对基础的知识点已经很熟悉，你可以自动跳过。写上去的原因是查漏补缺，巩固一下基础。
如果有不对的地方，欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school；
参考链接 ：http://www.w3school.com.cn/cssref/pr_background-clip.asp