css背景条纹样式等

div{
width:200px;
height:200px;
display:inline-block;
}
.h-line{
background:linear-gradient(greenyellow 30%,transparent 0);
background-size:100% 30px;
}
.v-line{
background:linear-gradient(to right,greenyellow 50%, pink 0);
background-size:20px 100%;
}
.deg-line{
background:repeating-linear-gradient(45deg,greenyellow 0,greenyellow 15px,pink 0,pink 30px);
}
.net-line{
background:linear-gradient(greenyellow 1px,transparent 0),
linear-gradient(90deg,pink 1px,transparent 0);
background-size:20px 20px;
}
.net-block{
background:white;
background-image:linear-gradient(rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0);
background-size:30px 30px,30px,30px;
}
.net-line-block{
background-color:#58a;
background-image:linear-gradient(white 1px,transparent 0),
linear-gradient(90deg,white 1px,transparent 0),
linear-gradient(white 3px,transparent 0),
linear-gradient(90deg,white 3px,transparent 0);
background-size:15px 15px,15px 15px,75px 75px,75px,75px;
}
.point{
background-color:#655;
background-image:radial-gradient(tan 30%,transparent 0),
radial-gradient(tan 30%,transparent 0);
background-size:30px 30px;
background-position:0 0,15px 15px;
}
.chessboard{
background-color:#eee;
background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-size:30px 30px;
background-position:0 0,15px 15px;

}