本文共 2234 字，大约阅读时间需要 7 分钟。

条纹背景

现在我们需要条纹的背景，而且不通过加载图片的方式，而是以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);}

转载地址：https://blog.csdn.net/PeZXO/article/details/106148836 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！