爱站程序员基地《css揭秘》笔记（五）， 条纹背景
- 条纹背景
- 解决方案
- 垂直条纹
- 斜向条纹
条纹背景
现在我们需要条纹的背景，而且不通过加载图片的方式，而是以css的方式形成，现给出以下解决方案：
解决方案
通过线性渐变可以很好地得到条纹背景效果：
.box11{margin: 1.25em;width: 12.5rem;height: 12.5rem;background: linear-gradient(#fb3,#58a);}
还可以通过百分比的方式来控制两种颜色过渡时占据的空间大小。
.box12{margin: 1.25em;width: 12.5rem;height: 12.5rem;background: linear-gradient(yellow 25%, skyblue 75%);}
background: linear-gradient(yellow 25%, skyblue 75%);
，
yellow 25%
意味着从开始到25%的位置是黄色，而
skyblue 75%
则意味着从75%到结束位置是天蓝色，中间从25%到75%则是从黄色过渡到蓝色的空间。
如果使过渡的空间位置为0，即能生成条纹状背景：
.box13{margin: 1.25em;width: 12.5rem;height: 12.5rem;background: linear-gradient(yellow 50%, skyblue 50%);}
我们可以通过
background-size
来控制背景条纹的大小，
background-size
为两个值时，第一个值用于指定背景图片宽度，第二个值用于指定背景图片高度：
.box14{margin: 1.25em;width: 12.5rem;height: 12.5rem;background: linear-gradient(yellow 50%, skyblue 50%);background-size: 100% 30px;}
由于背景默认是重复的，所以背景会被多条条纹填充完：
我们如果想要得到不等宽的条纹，只需修改颜色的起始位置或者结束位置。
.box15{margin: 1.25em;width: 12.5rem;height: 12.5rem;background: linear-gradient(yellow 25%, skyblue 25%);background-size: 100% 30px;}
如果后一个颜色的位置值设置的要比前一个颜色的位置值要小，那么它始终将以前一个颜色结束的位置作为起始位置。
.box16{margin: 1.25em;width: 12.5rem;height: 12.5rem;background: linear-gradient(yellow 20%, skyblue 0);background-size: 100% 30px;}
在
linear-gradient
中善用后一颜色位置值为0可以得到多条条纹。
.box17{margin: 1.25em;width: 12.5rem;height: 12.5rem;background: linear-gradient(yellow 20%,skyblue 0, skyblue 60%,purple 0);background-size: 100% 30px;}
垂直条纹
垂直条纹与水平条纹类似，只需要在线性渐变的参数前添加方向值：
.box18{margin: .625rem;width: 12.5rem;height: 12.5rem;background: linear-gradient(to right,yellow 40%,skyblue 0);background-size:30px 100%;}
水平条纹是因为线性渐变的方向值默认是
to bottom
，除了
to right
，也可以用
95deg
这样的角度值。
修改了方向值还需要修改
background-size
，这个属性决定背景在宽度与高度上占据的大小。
斜向条纹
如果你以为想要得到45度斜向的条纹,只需要把
linear-gradient
第一个有关方向的参数设定为
45deg
就行了，那么就错了：
.box19{margin: .625rem;width: 12.5rem;height: 12.5rem;background: linear-gradient(45deg,yellow 40%,skyblue 0);background-size:30px 30px;}
从上图中可以看到生成的背景实际上是重复的三角形拼合而成。
如果想要得到重复的斜向条纹，可以使用
repeating-linear-gradient
设置。
.box20{margin: .625rem;width: 6.25rem;height: 6.25rem;background: repeating-linear-gradient(45deg,yellow 0, yellow 15px,skyblue 0,skyblue 30px);}
