clip-path:解决设置border-image后border-radius不生效问题

想使用css实现一个带圆角的渐变边框
代码及结果如图：

虽然设置了border-radius:10px但结果仍是直角，查阅文档后W3C给出的解释：A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
翻译后：
一个框的背景，而不是它的边框图像，被剪裁到适当的曲线（由“背景剪辑”确定）。 裁剪到边框或填充边缘的其他效果（例如“溢出”而不是“可见”）也必须裁剪到曲线。替换元素的内容总是修剪到内容边缘曲线。 另外，边框边缘曲线外的区域不接受代表元素的鼠标事件。

总之结果就是：一旦通过border-image给border填充颜色了，那border-radius的裁剪效果就失效了。

当然解决方案有很多，比如通过外部包一个元素设置border-radius+overflow:hidden;实现圆角。

今天学习一个新的属性不需要通过增加新的元素来完美解决这个问题：clip-path:使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。(建议大家点击链接查看一下这个属性，功能十分强大)当把图一css中注释的代码取消注释后即可获得我们想要的效果

解释一下clip-path: inset(0 round 10px);

• clip-path: inset() 是矩形裁剪
• inset() 的用法有多种，在这里 inset(0 round 10px) 可以理解为，实现一个父容器大小（完全贴合，垂直水平居中于父容器）且 border-radius: 10px 的容器，将这个元素之外的所有东西裁剪掉（即不可见）。