html 条纹背景,CSS3 一组条纹背景图案

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

}

.box {

float: left;

height: 500px;

width: 20%;

}

.vertical-stripe {

background: -webkit-repeating-linear-gradient(0deg, #474747, #474747 10px, #575757 10px, #575757 20px);

background: repeating-linear-gradient(90deg, #474747, #474747 10px, #575757 10px, #575757 20px);

}

.diagonal-stripe-one {

background: -webkit-repeating-linear-gradient(135deg, #272727, #272727 10px, #373737 10px, #373737 20px);

background: repeating-linear-gradient(-45deg, #272727, #272727 10px, #373737 10px, #373737 20px);

}

.circle-stripe {

background: -webkit-repeating-radial-gradient(circle, #474747, #474747 10px, #575757 10px, #575757 20px);

background: repeating-radial-gradient(circle, #474747, #474747 10px, #575757 10px, #575757 20px);

}

.diagonal-stripe-two {

background: -webkit-repeating-linear-gradient(45deg, #272727, #272727 10px, #373737 10px, #373737 20px);

background: repeating-linear-gradient(45deg, #272727, #272727 10px, #373737 10px, #373737 20px);

}

.horizontal-stripe {

background: -webkit-repeating-linear-gradient(90deg, #474747, #474747 10px, #575757 10px, #575757 20px);

background: repeating-linear-gradient(0deg, #474747, #474747 10px, #575757 10px, #575757 20px);

}