css3 重复渐变背景repeating-linear-gradient

.address-line {
  width: 100%;
  height: 6rpx;
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(
    135deg, #FF3300, #FF3300 5%, white 2.5%, white 7.5%, #83C6C2 7.5%, #83C6C2 12.5%, white 12.5%, white 15%
  );
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(
    135deg, #FF3300, #FF3300 5%, white 2.5%, white 7.5%, #83C6C2 7.5%, #83C6C2 12.5%, white 12.5%, white 15%
  );
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(
    135deg, #FF3300, #FF3300 5%, white 2.5%, white 7.5%, #83C6C2 7.5%, #83C6C2 12.5%, white 12.5%, white 15%
  );
  /* 标准语法 (必须在最后) */
  background: repeating-linear-gradient(
    135deg, #FF3300, #FF3300 5%, white 2.5%, white 7.5%, #83C6C2 7.5%, #83C6C2 12.5%, white 12.5%, white 15%
  );
}

可以当做分割线来显示，红色，白色，绿色，白色，依次。这里去掉了渐变效果，如果想用渐变效果，可以把上面代码中颜色起止的止颜色去掉就可以了，即每个颜色的第二个重复项。