问题背景

今天和往常一样，打开我负责的项目开始搬砖，当我做到一个时间进度条的边框时，遇到了渐变边框

此时的我还没有意识到问题，依旧开心的复制蓝湖上的代码

渐变边框生效了，圆角呢

我原本以为是代码顺序的问题，border-image将border-radius覆盖了，于是我将border-radius放在后面，但是依旧不生效，这是咋回事，打开万能的百度，原来border-image和border-radius就是不兼容。

这可咋整，作为还在试用期的菜鸟第一次因为样式停住，如果不兼那别人的渐变圆角边框是怎么做的，别人能做就一定有解决方法，我可是号称100%还原设计稿的，结果思考得出以下解决方法

解决方法

在最外层盒子包裹一个更大的盒子time_container,将time_container的背景色设置为渐变边框的颜色并为它设置想要的border-radius，这时我们得到的就是一个渐变的但是背景色为纯色的盒子，以为原本的盒子time_box的背景色覆盖了渐变背景，这时候我们再给time_container设置一个padding，将time_box挤一下，padding值为边框的宽度，就得到了我们想要的渐变边框且带有圆角的盒子

本次就给大家带来这么多，如果大家有其他的意见或者更好的解决方法欢迎在评论区交流，如果感觉文章不错有帮助的麻烦点个免费的赞给笔者一点小小的鼓励，感谢大家。