一,垂直条纹.
.linearGradient{
width:200px;
height: 200px;
background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);
background-size:100% 50px;
}
二,水平条纹:
.linearVertical{
margin-top:10px;
width:200px;
height: 200px;
background:linear-gradient(90deg,#fb3 50%, #58a 0);
background-size:30px 100%;
}
三,斜向条纹:
.linearOblique{
margin-top:10px;
width:200px;
height: 200px;
background:repeating-linear-gradient(45deg,#fb3,#58a 30px);
}
四,同色系条纹:
.linearColorsame{
margin-top:10px;
width:200px;
height: 200px;
background:#278;
background-image:repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 10px,
transparent 0,
transparent 30px)
}
效果图: