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>