用css制作头像渐变边框

当时用到的头像切图：

目前想到有两种实现办法：用一个父盒子直接背景线性渐变，然后字里面的头像图片定位在内部就可以了直接用 border-image 来实现边框渐变一、background 背景 linear-gradient 实现办法

这个还是比较大略，不过定位位置和圆角大小须要自己每次根据实际的尺寸来打算，而且觉得还额外多利用了一个 div 标签，不是很优雅。

但是这个 border-image 和 border-radius 不能同时利用，设置了边框背景，圆角就自动失落效了，以是终极做出来的是一个直接的边框背景。

这个样子肯定是不阔以的了，然后 发明晰 clip-path 这个裁切属性，搞上去外圆角倒是又了，那里面图片的内圆角呢？图片还是个直角的，和需求有点不符。

终极实现办法

用 border-image 办法虽然少用了一个标签，但是没法同时实现内外圆角。
末了只能在第一种办法上来进行优化，还是利用背景渐变的办法来实现，不过位置不用定位，直接用 padding 留出须要的边框宽度就行了，不须要自己每次要去打算定位位置，不过圆角还是要去根据大小打算下的。