css linear-grandient实现 垂直 水平 斜向条纹 渐变

一，垂直条纹.

.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)

}

 

《揭秘》笔记