边框设置渐变色和圆角的问题

首先说明一点，渐变色border-image的设置和圆角的设置 border-radius是不能共同存在的，如果共同存在的话，那么只有渐变色会生效，圆角则显示不出来。我列举几个例子顺带解决一下我在项目中遇到的问题。

1.实例1：

这个渐变色设置的比较好，还有一定动画效果，同时呢，也设置了圆角。

效果大概是这样的，因为只是展示一张静态的：

2.实例2：

这个是用伪元素来处理的：

    
    
    
    
    


    渐变色

效果看一下：

3.实例3：

这个也是一种方法，看一下效果：

4.实例4：

看一下效果：

实例3和实例4有个共同的缺点，如果要求背景色是透明色，那就不能行了。

5.实例5：

看一下效果：

最后再补充一种比较好的渐变边框效果图：

 效果图：

 

个人觉得最后这一种还可以，代码也不多，当然看个人喜好了。