CSS-实现最简洁的四角边框

在前端有一句古话，叫能用CSS实现的就别麻烦JS，因为声明式的配置语言CSS相比于自由式的编程语言JS，更容易被编译器所优化，比如css渲染引擎会优先考虑gpu加速，因此CSS动画的性能往往高于JS动画，本文介绍在不需要html和js的配合的情况下，用纯css实现一个好看的四角边框。

 用最节能的代码实现如图所示的，在大数据报表中非常常见的四角边框，有点类似Unicode中的制表符和直角括号：⌜ ⌝ ⌞ ⌟，有很多种办法来实现它，但最简洁的是利用边框图像（蒙版）+径向渐变（底图）来实现，其中径向渐变的椭圆的直径要略大于元素盒子的边长，椭圆内全透明，椭圆外则使用边框的颜色，径向渐变图在盒子中是长这样的：

通过调整椭圆的长轴和短轴来改变四角的长度，最后利用边框蒙版将不需要的部分盖住即可，注意border-image-slice和border-width设置成一样大，此外还可以利用border-image-outset来对边框进行缩放，往往需要让边框远离盒子一些更好看，比如：

 

border-image-source: radial-gradient(60% 60%, transparent 0px, transparent 100%, cyan 100%);
border-image-slice: 1;
border-width: 1px;
border-style: solid;
border-image-outset: 1cm;

只需要5行CSS就能实现，而且不需要增添额外的dom元素，性能卓越，还可以借此实现方括号：[ ] ⎵ ⎴，只要让椭圆的宽或高略小于盒子，让一边小于50%，另一边大于50%，这样相邻的2个角就能连接上，实现对边边框（请脑补逻辑上的椭圆）。所以说，能用CSS就别麻烦JS，JS有更重要的事情要做。