水平条纹
1 .test { 2 width: 200px; 3 height: 100px; 4 background:linear-gradient(#fb3 20%,#58a 80%); 5 margin: 0 auto; 6 7 }
现在容器顶部的20%区域被填充为#fb3实色,而底部20%区域被填充#58a实色。真正的渐变只出现在容器60%的高度区域。
当渐变设置为50%时,已经没有渐变效果,只有两块实色,各占据了background-image一般面积。也可以通过background-size设置尺寸:
1 .test { 2 width: 200px; 3 height: 100px; 4 background:linear-gradient(#fb3 50%,#58a 50%); 5 margin: 0 auto; 6 background-size: 100% 30px; 7 8 }
效果图:
我们把这两条条纹的高度都缩小到了15px,默认是重复平铺的。
如果我们把第二个色标的位置值设置为0,那它的位置就总是会被浏览器调整为前一个色标的位置值。
1 .test { 2 width: 200px; 3 height: 100px; 4 background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0); 5 margin: 0 auto; 6 background-size: 100% 45px; 7 8 }
效果图:
垂直条纹
通过在开头加上一个额外的参数来指定渐变的方向。默认是 to bottom .最后,我们还需要把background-size的值颠倒一下。
1 .test { 2 width: 200px; 3 height: 100px; 4 background:linear-gradient(90deg,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0); 5 margin: 0 auto; 6 background-size: 45px 100% ; 7 8 }
效果图:
斜向条纹
每个重复的小的单元,要包含四条条纹,只有这样才可以做到无缝拼接。
1 .test { 2 width: 200px; 3 height: 100px; 4 background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0); 5 margin: 0 auto; 6 background-size: 30px 30px ; 7 8 }
效果图: