<head>
<meta charset="utf-8">
<title>条纹背景</title>
<style type="text/css">
html,body{
padding: 0;
margin:0;
}
div{
width: 20rem;
height: 8rem;
margin:0 auto;
line-height: 8rem;
color:#ed5721;
text-align: center;
}
div+div{
margin-top: 10px;
}
.box{
background: linear-gradient(#F8CDDA 30%,#F7BB97 0);
background-size: 100% 1rem;
}
.box2{
background: linear-gradient(to right,#F8CDDA 30%,#F7BB97 0);
background-size: 4rem 100%;
}
.box3{
/* background: linear-gradient(45deg,粉 25%,橘色 0,橘色 50%,粉 0,粉 75%,橘色 0);*/
/* background: linear-gradient(60deg,#F8CDDA 25%,#F7BB97 0,#F7BB97 50%,#F8CDDA 0,#F8CDDA 75%,#F7BB97 0);
但是这样有缺点，这样不能随意更改倾斜角度*/
background: repeating-linear-gradient(75deg,#F8CDDA,#F8CDDA 2rem,#F7BB97 0,#F7BB97 4rem);
}
.box4{
background: #F7BB97;
/*这里只有一种颜色，利用透明度调制副色系，更改的时候只需要改背景色就行了*/
background-image: repeating-linear-gradient(45deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 2rem,transparent 0,transparent 4rem);
}
</style>
</head>
<body>
<div class='box'>水平条纹</div>
<div class='box2'>垂直条纹</div>
<div class='box3'>斜向条纹</div>
<div class='box4'>斜向条纹主色调</div>
</body>
复制代码转载于:https://juejin.im/post/5cd3bfd8518825356d54b9ae
1122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
