CSS实现原型渐变边框

上面是需求的效果。

思路是利用background-image属性的多段线性渐变然后配合background-clip属性

 

    width:196px;

    height:196px;

    padding: 4px;

    box-sizing: border-box;

    background-image: linear-gradient(white, white), linear-gradient(53deg,rgba(125,144,255,1),rgba(207,146,255,1));

    background-clip: content-box,padding-box;

    border-radius:50%;

这里padding用来控制边框的宽