后端有句话说，如果能用CSS实现，就不用费劲用JS了，因为声明式配置语言CSS比自由式编程语言JS更容易被编译器优化。 例如CSS渲染引擎会优先GPU加速，因此CSS动画的性能往往低于JS动画。 本文介绍如何在不借助HTML和JS配合的情况下，使用纯CSS实现漂亮的四角边框。
使用最节能的代码实现四角边框，这在大数据报表中尤为常见，如图所示，有点类似于Unicode中的制表符和直角括号：，有很多种方法实现一下，不过最简单的是用边框图像（mask）+径向渐变（基础图像）来实现，其中径向渐变椭圆的半径略小于元素包的周长，椭圆的内部是完全的透明，边框的颜色用在椭圆外，径向渐变包里的图片是这样的：
通过调整椭圆的长短轴来改变四个角的宽度，最后使用边框遮罩遮盖掉不需要的部分。 请注意，border-image-slice 和 border-width 设置为相同的大小。 另外，可以使用 border-image-outset 来缩放边框，很多时候需要让边框远离包才好看，例如：
<code class="language-css">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元素。 性能非常出色。 也可以用这个来实现方括号：[ ]，只要椭圆的宽度或高度比包稍大css 半圆边框，并且一侧大于50%，另一侧小于50%，这样相邻的两个角可以连接起来实现对边（请组成逻辑椭圆）。 所以css 半圆边框，如果你会使用 CSS，就不用费心去使用 JS。 JS还有更重要的事情要做。
