1、条纹背景
<style type="text/css">
.horizontal-stripes{
width: 200px;
height: 200px;
margin-bottom: 20px;
color: #fff;
/* 原理：#f60占50%，从0%~50%都是纯#f60；
渐变色从#f60(起始色) 50%处开始适度到#333(完结色) 50%处，起点也是50%，因而相当于没有适度；
起始色与完结色还剩下50%，这剩下的50%区域按完结色平均分配 */
background-image: linear-gradient(#f60 50%, #333 50%);
background-size: 100% 20px;
}
.veritcal-stripes{
width: 200px;
height: 200px;
margin-bottom: 20px;
color: #fff;
background-image: linear-gradient(to right, #f60 50%, #333 50%);
background-size: 20px 100%;
}
</style>
<body>
<div class="horizontal-stripes">横向条纹</div>
<div class="veritcal-stripes">垂直条纹</div>
</body>
2、收货地址底部斜边框
其实这个边框并不完满，将高度调高后会变成下图这样，有晓得解决的高手请指导下：
<style>
.box{
position: relative;
width: 50%;
height: 150px;
margin: 50px auto;
background-color: #eee;
}
.box::after{
position: absolute;
bottom: 0;
left: 0;
content: ' ';
width: 100%;
height: 4px;
background-image: repeating-linear-gradient(-45deg,
#ff6c6c 0, #ff6c6c 20%,
transparent 20%, transparent 25%,
#1989fa 25%, #1989fa 45%,
transparent 45%,transparent 50%);
background-size: 140px;
}
</style>
<body>
<div class="box"></div>
</body>
发表回复