CSS实现渐变圆角边框

渐变边框可以使用 border-image，但带有圆角的渐变边框单靠 border-image却无法实现，那有哪些方法可以实现 圆角渐变边框呢？

css实用小知识，你肯定用得上

方案一：使用border-image+clip-path实现

 


    
border-image
    +
    
clip-path
    实现

优点是内容背景可以透明

方案二：background-image+background-clip实现

    
 background-image 
     + 
     
background-clip
     实现

缺点：

• 内容背景不能半透明
• 实现复杂
• 不能使用padding

方案三：border-image+overflow: hidden实现

    

        
border-image
        +
        
overflow: hidden
        实现
    

缺点：需要多嵌套一层父元素，并且还需要设置overflow: hidden;

方案四：background-image+父div实现

    

        
background-image
        +
        
父div
        实现
    

这个缺点和方案三一样