1、

    1.   <style>
    2.     *{
    3.         margin: 0;
    4.         padding: 0;
    5.     }
    6.     body{
    7.         background-color: #000;
    8.     }
    9.     div{
    10.         position: absolute;
    11.         left: calc(50% - 50px);
    12.         top: calc(50% - 50px);
    13.         width: 100px;
    14.         height: 100px;
    15.         border: 10px solid black;
    16.         /* 支持渐变色 */
    17.         border-color: lightpink;
    18.         border-image-source: linear-gradient(red,yellow);
    19.         /* border-image-source:url(source/border.png);:用图片填充 */
    20.         border-image-slice: 10;
    21.         /* border-image-slice: 100%;也可以这样写 ，但最好不要写%，slice一定要随着border-image出场！！！*/
    22.         border-image-width: auto;
    23.         /* 填auto是看slice值=10px，填数字是多少倍 */
    24.         border-image-outset: 100px;/* 规定边框图像超过边框盒的量 */
    27.         /* stretch:默认值拉伸 repeat:平铺（不负责任，分散），相当于复制 round：负责任，拉伸的过程中，会随时复制一个元素，很规整
    28.         space：空格大到一定程度，才能加入新的元素，先拿空白补 */
    29.         border-image-repeat: stretch;
    30.     }
    31.     </style>
    32. </head>
    33. <body>
    34.     <div></div>
    35. </body>