border-image，border-shadow，outline用法总结

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

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

border-image，box-shadow，outline 均支持 内填充，外填充，可以实现 遮罩(包括mask遮罩)，背景，边框，外延

border-image

内填充

1. fill可以内填充

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

fill版遮罩，boder-image-slice为0，不切割，整个图fill在中间，boder-image-repeat默认值为stretch, 所以遮罩均匀覆盖

border-image: linear-gradient(#0003,#000) 0 fill;

2. border-image-width和border-width也可以内填充

使用border-width实现内填充可以实现一些特殊效果

2.1 渐变色，尽管border-image-slice截取的大小为1，但是border-width为4,1平会等比例扩大至4宽度
div {
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

2.2 渐变圆形，border-image-slice截取一个圆的的84.5%, border-image-width为50%，会等比例放大至50%，就是4等分的效果

border-image: radial-gradient(var(--c) 69%,#0000 70%) 84.5%/50%;
相当于
border-image-source: radial-gradient(var(--c) 69%,#0000 70%);
border-image-slice: 84.5%;
border-image-width: 50%;

-webkit-mask-box-image 相当于 border-image直接用在mask上，可以实现mask遮罩裁切同样功能
-webkit-mask-box-image 支持率已经相当高，只有firefox不支持
-webkit-mask-box-image 未来会是 mask-border，目前只有 safari 17.1以上支持

以下可实现按照组合圆形裁切

--_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
-webkit-mask-box-image: var(--_m);
mask-border: var(--_m);

2.3 遮罩 overlay

border-image: linear-gradient(#0003,#000) 50%/50%;
相当于
border-image-slice: 50%; 将渐变4等分
border-image-width: 50%; 将切割的每一个缩放至50%填充，4块贴在一起拼成一个完整的遮罩

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

边框

斑马纹边框
border: 3px solid transparent; /*必须否则看不见border-image*/
border-image: repeating-linear-gradient(135deg, deepskyblue, deepskyblue 5px, transparent 5px, transparent 10px) 1;

渐变边框
border: 1px solid transparent; /*必须否则看不见border-image*/
border-image: linear-gradient(to right, red, orange) 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);
}

 

 

参考：
CSS boder-image 图片边框属性详解
被低估的border-image属性
CSS小技巧之绘制心形图案
Gradient borders on one or more sides with border-image