image.png

    1.   .box{
    2.               width: 200px;
    3.               height: 100px;
    4.               padding: 1em;
    5.               border: 1em solid transparent;
    6.               background: linear-gradient(white,white),
    7.               url(../images/content.webp);
    8.               background-size: cover;
    9.               background-clip: padding-box（设置线性渐变背景裁剪）,border-box（背景图片裁剪）;
    10.                              background-origin: border-box（背景图片边界框的相对位置）;
    11.           }
    13. background-clip:
    14. padding-box(背景被裁剪到内边距框)||
    15. border-box(背景被裁剪到边框)||
    16. content-box(背景被裁剪到内容框)
    18. background-origin：指定background-position属性应是相对位置。

    image.png

    1.                         padding: 1em;
    2.             border: 1em solid transparent;
    3.             background: linear-gradient(white, white) padding-box,
    4.             repeating-linear-gradient(-45deg,
    5.             red 0, red 12.5%,
    6.             transparent 0, transparent 25%,
    7.             #58a 0, #58a 37.5%,
    8.             transparent 0, transparent 50%)
    9.             0 / 5em 5em;
    11. ||
    13.                         padding: 1em;
    14.             border: 16px solid transparent;
    15.             border-image: 16 repeating-linear-gradient(-45deg,
    16.             red 0, red 1em,(1)
    17.             transparent 0, transparent 2em(2),
    18.             #58a 0, #58a 3em,(3)
    19.             transparent 0, transparent 4em);(4)
    22. (1)-(4) 层层覆盖

    image.png

    1. 动画效果
    3.         .box{
    4.             width: 200px;
    5.             height: 100px;
    6.             padding: 1em;
    7.             border: 1px solid transparent;
    8.             background: linear-gradient(white,white) padding-box,
    9.                         repeating-linear-gradient(-45deg,
    10.                         black 0,black 25%,white 0,white 50%)
    11.                         .6em .6em ;
    12.             animation: ants 3s linear infinite;
    13.         }
    14.         @keyframes ants{
    15.             to {background-position: 100%}
    16.         }
    18.                 linear-gradient(white,white) padding-box,(覆盖下面的repeating-linear-gradient只显示出边框产生动画效果)

    image.png

    1. 边框裁剪
    3.  .box{
    4.             border-top: .2em solid transparent;
    5.             border-image: 100% 0 0 linear-gradient(90deg,
    6.                             currentColor 4em,
    7.                             transparent 0);
    8.                             padding-top: 1em;
    9.                             color: rebeccapurple;
    10.         }
    13. currentColor:根据 color 属性的变化而自动适应
    14. border-image:
    15. border-image-source:url(”) 图片的路径
    16. border-image-slice 图片的裁切方式
    17. border-image-repeat 裁切后图片的填充方式stretch/repeat/round,分别为拉伸，重复，平铺，默认值为stretch,顺序为：上下，左右。