上面是需求的效果。
思路是利用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用来控制边框的宽