background的水平条纹和斜向条纹

Posted 2020-08-06 Mr.Kiven

水平条纹：

<div id="div1"> </div>

linear-gradient属性

#div1{
width: 100px;
height: 100px;
background:linear-gradient(yellow 25%,red 25%);
background:linear-gradient(yellow 25%,red 50%);模糊条纹边界
background:linear-gradient(90deg , yellow 25%,red 50%);90度竖直条纹
background-size: 42.4264068px 42.4264068px ;
}

-----------------------------------------------------------------

repeating-linear-gradient属性

 

#div1{
width: 100px;
height: 100px;
background: repeating-linear-gradient(45deg , #fb3,#fb3 15px , #58a 0 , #58a 30px)
}