border-image用法总结

border-image 支持 渐变，可实现虚线边框，斑马纹边框

border-image 支持在外部显示图像，不占空间，不影响布局，且不受overflow:hidden限制

border-image，box-shadow，outline 均支持 内填充，外填充，可以实现 背景，边框，外延

border-image

内填充
border-image: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) 1 fill;

外填充
就是 border-image-outset
border-image: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) 1 fill / / 100vw;

边框
border-image: repeating-linear-gradient(135deg, deepskyblue, deepskyblue 5px, transparent 5px, transparent 10px) 1;

border-shadow

内填充
box-shadow: inset 0 0 0 999px rgba(0,0,0,.05);

外填充
box-shadow: 0 0 0 199vw rgba(0,0,0,.05)

边框
box-shadow: inset 0 0 0 1px #ccc;

outline

内填充
outline-offset: -999px;

外填充
outline: 999vw solid rgba(0,0,0,.05);

边框
outline: 1px solid rgba(0,0,0,.05);

在有placeholder时不显示错误提示，可实现未聚焦不显示错误提示

:invalid:not(:placeholder-shown) {
　　background-image: var(--invalid);
}

出处：被低估的border-image属性