gradient

属于background-image

linear-gradient

radial-gradient

repeating-liner-gradient

    可做出斑马线的效果

background-image:repeating-linear-gradient( to left top,red 10%,blue 50%,greenyellow);
background-image:repeating-linear-gradient(to left top,blue,blue 10%,red 10%,red 20%);

repeating-radial-gradient

    可做出波浪线的效果
<div class="radial-coupons">
    <ul>
        <li class="coupons-item">
            <div class="coupons-left">优惠券</div>
            <div class="coupons-wrapper">
                <div class="coupons-right">88元</div>
            </div>
        </li>
        <li class="coupons-item">
            <div class="coupons-left">优惠券</div>
            <div class="coupons-wrapper">
                <div class="coupons-right">88元</div>
            </div>
        </li>
        <li class="coupons-item">
            <div class="coupons-left">优惠券</div>
            <div class="coupons-wrapper">
                <div class="coupons-right">88元</div>
            </div>
        </li>
    </ul>
</div>

---css样式

ul {
    list-style: none;
    }
.radial-coupons {
    border: 1px solid #bababa;
    box-sizing: border-box;
    padding: 8px;
    margin: 12px;
    background: #f1f1f1;
}
.coupons-item +.coupons-item {
    margin-top: 12px;
}
.coupons-item::after {
    content:"";
    display: block;
    visibility: hidden;
    clear: both;
}
.coupons-left {
    float: left;
    padding: 0 20px;
    height: 80px;
    background: #0f9b4e;
    line-height: 80px;
    margin-left:10px;
    position: relative;
}
.coupons-right {
    height: 80px;
    margin-left: 4px;
    background: #c91010;
    line-height: 80px;
    margin-right: 10px;
    text-indent:6em;
    position: relative;
}
.coupons-wrapper {
    overflow: hidden;
}
.coupons-left::before {
    content:"";
    position: absolute;
    left: -8px;
    top: 0;
    height: 100%;
    width: 8px;
    background: repeating-radial-gradient(ellipse 8px 10px at right
    ,#0f9b4e,#0f9b4e 4px,transparent 4px,transparent 12px) repeat-y;
    background-size: 8px 10px;
}
.coupons-left::after {
    content:"";
    position: absolute;
    right:-2px;
    width: 2px;
    height: 100%;
    background: repeating-radial-gradient(circle 2px at right
    ,transparent,transparent 2px,#0f9b4e 2px,#0f9b4e 4px) repeat-y;
    background-size: 2px 8px;
}
.coupons-right::after {
    content:"";
    position: absolute;
    top: 0;
    right: -8px;
    height: 100%;
    width: 8px;
    background:repeating-radial-gradient(ellipse 8px 10px at left
    ,#c91010,#c91010 4px,transparent 4px,transparent 12px) repeat-y;
    background-size: 8px 10px;
}
.coupons-right::before {
    content:"";
    position: absolute;
    left:-2px;
    top: 0;
    height: 100%;
    width: 2px;
    background:repeating-radial-gradient(circle 2px at left
    ,transparent,transparent 2px,#c91010 2px,#c91010 6px) repeat-y;
    background-size: 2px 8px;
}

波浪线的参考原文