700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html 条纹背景 CSS3 一组条纹背景图案

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

时间:2018-10-19 03:43:33

相关推荐

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

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。