border-image
border-image-source
指定一个图像用作边框以替代由边框样式属性指定的渲染效果，并且如果在 “border-image-slice” 中给出 “fill” 关键字，则作为元素的额外图像背景。如果值为 “none” 或者如果图像无法显示（或者该属性不适用），则将使用边框样式；否则，不绘制元素的边框样式边框，并且按照下面各部分的描述绘制此边框图像。
border-image-slice
“border-image-slice” 此属性指定从图像的上、右、下、左边缘向内的偏移量，将图像分为九个区域：四个角、四条边和一个中间部分。中间图像部分会被丢弃（被视为完全透明），除非存在 “fill” 关键字。（它会绘制在背景之上；参见 “绘制边框图像”。）
如果只有一个分量值，它将应用于所有边。如果有两个值，顶部和底部设置为第一个值，右侧和左侧设置为第二个值。如果有三个值，顶部设置为第一个值，左侧和右侧设置为第二个值，底部设置为第三个值。如果有四个值，它们分别应用于顶部、右侧、底部和左侧。
<percentage [0,∞]>（百分比 [0，正无穷]）
百分比是相对于图像的大小而言的：水平偏移量相对于图像的宽度，垂直偏移量相对于图像的高度。
<number [0,∞]>（数字 [0，正无穷]）
数字表示图像中的像素（如果图像是光栅图像）或矢量坐标（如果图像是矢量图像）。
“fill”
如果存在 “fill” 关键字，会使边框图像的中间部分被保留。（默认情况下它会被丢弃，即被视为空。）
负值是无效的。计算得出的值如果大于图像的大小，则被解释为 100%。
由 “border-image-slice” 值给出的区域可能会重叠。但是，如果右侧和左侧宽度之和等于或大于图像的宽度，顶部和底部边缘以及中间部分的图像将为空 —— 这与为这些部分指定了一个非空的透明图像具有相同的效果。对于顶部和底部的值也是类似的情况。
如果必须确定图像的大小才能确定切片（例如，对于没有自然尺寸的 SVG 图像），则使用默认的大小调整算法，不指定大小，并将边框图像区域作为默认对象大小。
border-image-outset
这些值指定边框图像区域超出边框盒的量。
如果只有一个分量值，它将应用于所有边。如果有两个值，顶部和底部设置为第一个值，右侧和左侧设置为第二个值。如果有三个值，顶部设置为第一个值，左侧和右侧设置为第二个值，底部设置为第三个值。如果有四个值，它们分别应用于顶部、右侧、底部和左侧。
<length [0,∞]>（长度 [0，正无穷]）
表示指定长度的外扩量。
<number [0,∞]>（数字 [0，正无穷]）
表示对应计算出的边框宽度的指定倍数的外扩量。
负值是无效的。
渲染在边框盒之外的边框图像部分属于油墨溢出，不会触发滚动。并且这些部分对于鼠标事件是不可见的，也不会代表元素捕获此类事件。
border-image-repeat
此属性指定边框图像的边和中间部分的图像如何进行缩放和平铺。第一个关键字应用于顶部、中间和底部部分的水平缩放和平铺，第二个关键字应用于左侧、中间和右侧部分的垂直缩放和平铺；参见 “绘制边框图像”。如果缺少第二个关键字，则假定它与第一个关键字相同。值具有以下含义：
“stretch”（拉伸）：
图像被拉伸以填充其对应的区域。
“repeat”（重复）：
图像被平铺（重复）以填充其对应的区域。
“round”（铺满）：
图像被平铺（重复）以填充其对应的区域。如果不能用整数个图块填充该区域，则图像会被重新缩放以便可以做到。
“space”（间隔）：
图像被平铺（重复）以填充其对应的区域。如果不能用整数个图块填充该区域，则多余的空间会分布在图块周围。
<body>
<div class="border-image">border 宽度为9，slice 为1 </div>
<div class="border-image2"> </div>
<div class="border3">我是谁</div>
<div class="el"></div>
</body>
<style>
* {
box-sizing: border-box;
}
.border3 {
position: relative;
}
.border3:before {
content: "";
inset: 0;
position: absolute;
background: linear-gradient(to right, gold, deeppink);
padding: 10px;
border-radius: 10px;
-webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
-webkit-mask-clip: padding-box, content-box;
mask-clip: padding-box, content-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
}
@keyframes huerotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rorate(360deg);
}
}
div {
width: 200px;
height: 100px;
margin-bottom: 20px;
}
.border-image {
z-index: 2;
width: 200px;
height: 100px;
border: solid 10px transparent;
border-radius: 10px;
border-image: linear-gradient(to right, gold, deeppink) 9;
margin-bottom: 10px;
clip-path: inset(0 round 10px);
filter: hue-rotate(360deg);
/* animation: huerotate 6s infinite linear; */
}
.border-image2 {
width: 200px;
height: 100px;
border: solid 10px transparent;
padding: 30px;
border-radius: 10px;
background-image: linear-gradient(#fff 0 0),
linear-gradient(to right, gold, deeppink);
background-origin: border-box;
background-clip: padding-box, border-box;
}
/* .el {
width: 100vw;
height: 100vh;
padding: 1rem;
background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
mask-size: 100vmin;
mask-repeat: no-repeat;
mask-position: center;
} */
/* body {
margin: 0;
background: linear-gradient(to right, red, blue);
background-position-x: 0;
animation: size 3s infinite linear;
}
@keyframes size {
to {
background-position-x: 100vw;
}
} */
/* .el {
width: 100vw;
height: 100vh;
padding: 1rem;
background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: cover;
background-position: center;
mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/chris-mask.png);
mask-size: 100vmin;
} */
