实现信封效果的两种方式

实际开发过程中会遇到这样的样式需求

1. 边框方式

border-bottom: 4px solid;
border-image: repeating-linear-gradient(45deg,#FFBAB2 0,#FFBAB2 65rpx,#ffffff 65rpx,#ffffff 105rpx,#C4E4FF 105rpx,#C4E4FF 170rpx,#ffffff 170rpx,#ffffff 210rpx) 20;

    2.背景方式

width: 100%;
height: 4px;
background: repeating-linear-gradient(45deg,#FFBAB2 0,#FFBAB2 65rpx,#fbfaf5 65rpx,#fbfaf5 130rpx,#C4E4FF 130rpx,#C4E4FF 195rpx,#fbfaf5 195rpx,#fbfaf5 260rpx);