【CSS】透明背景的圆角渐变边框实现方案

css的渐变边框可以用下面方式实现

border-image: linear-gradient(rgb(89, 0, 255),pink) 30 30;

css的圆角边框可以用下面方式实现

border-radius: 20px;

那想要实现一个圆角的渐变边框呢,可能会以为,两个都用上不就可以了,但事实是,这两个属性并不兼容,所以要实现一个圆角的渐变边框,就得需要曲线救国的方法了



  
    
    
    
    
    渐变边框
  
  
    
    
     

最终效果图

 

 

你可能感兴趣的:(css,前端)