本文介绍了如何使用CSS创建各种条纹背景，包括横向、竖向和斜向条纹，以及使用repeat-linear-gradient简化斜向条纹的制作。通过调整linear-gradient参数和background-size属性，可以实现不同颜色比例和间距的条纹效果。此外，还探讨了如何方便地设定相近色调的颜色。
一、横向条纹
如下代码：
background: linear-gradient(#fb3 20%, #58a 80%)
上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:
background: linear-gradient(#fb3 50%, #58a 50%);
接下来可以通过设置背景的大小，让背景高度变小并且背景默认为repeat，从而出现条纹状
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
我们可以不设定第二个颜色的起始位置，设置为0，则浏览器默认为接着上一个颜色开始：
background: linear-gradient(#fb3 30%, #58a 0);
background-size:100% 30px;
这样就形成了一个黄色占30%蓝色占70%的条纹状背景
也可以设置多种颜色，下面设置了三种颜色的条纹：
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);
background-size: 100% 45px;
二、竖向条纹
只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定
background: linear-gradient(to right, 
最低0.47元/天 解锁文章
扫一扫
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
