实现带圆角的渐变边框（border-image和border-radius不能同时生效问题）

实现效果：渐变圆角边框（效果如下）

 

已知，border-image可以给边框设置渐变效果，border-radius可以设置圆角。

ok！然鹅，我的圆角呢！！！

布吉岛为什么，写了border-image之后，我的border-radius就无效了！！！

 

哭泣！！！但是，

换个思路！不用border-image也可以解决的思路！

不如就让我们试试用border-radius和background-image来实现吧！

首先给一个div设置渐变背景颜色，然后设置一个padding值（padding的大小就是原本边框的大小）；

然后在里面添加一个子div，背景颜色设置成白色，border-radius设置和外层一样即可。

1）给这个div外层添加一个div；

<div class="main">
 <div class="main_in"></div> 
</div>

2）设置div的圆角（8px），设置背景颜色渐变，设置一个padding值

（padding用来实现border效果，所以这个值跟border的值是一样的）

3）内层div设置和外层div一样大小的圆角8px，把背景颜色设置为白色。