css技巧——背景

条纹背景

使用线性渐变linear-gradient

.box{
          width: 50px;
          height: 50px;
          padding: 20px;
          background: linear-gradient(yellowgreen 30%,skyblue 70%);
      }

此时容器顶部30%的区域为yellowgreen的实色，底部30%为skyblue的实色，容器70%的高度开始渐变，如果把两个色标拉进，那么渐变区域就会变小，当为相同位置时，它们会产生一个无限小的过渡区域，此时基本上看不见渐变效果了

background: linear-gradient(yellowgreen 50%,skyblue 50%);

此时通过background-size调整尺寸，就可以得到条纹

background: linear-gradient(yellowgreen 50%,skyblue 50%);
background-size: 100% 30px;

如果需要不等宽或者渐变的条纹，直接更改色标位置即可

background: linear-gradient(yellowgreen 30%,skyblue 70%);

如果需要实现水平条纹，指定其方向即可

background: linear-gradient(to right ,yellowgreen 50%,skyblue 50%);

斜向条纹则可以使用

background:repeating-linear-gradient(45deg ,yellowgreen 10%,skyblue 30%);

连续的图像边框

老式信封样式边框的实现

  .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%)0/5em 5em;
        }

利用这种技巧，还可以配合动画实现蚂蚁行军框的效果

.box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%)0/1em 1em;
            animation: ants 12s linear infinite;
        }

        @keyframes ants {
            to {
                background-position: 100%;
            }
        }