Html 为多个边框编写CSS的好方法是什么？

我正在尝试构建多个边框，这些边框在用户图像周围逐渐褪色。我是这样写CSS的，但这不会有帮助：

width: 90px;
border-radius: 50%;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;

---

但它没有给出预期的输出。如何实现这一点？

使用

框阴影

和

边框半径

box-shadow:
  0 0 0 10px #817dd1,
  0 0 0 20px #5c58aa,
  0 0 0 30px #3d3a84,
  0 0 0 40px #211f56;

img{
利润率：40像素；
宽度：90px；
边界半径：50%；
框阴影：
0 10px#817dd1，
0 20px#5c58aa，
0 30px#3d3a84，
40px#211f56；
}
div{
背景#100f35；
宽度：170px；
}

<代码> > p>您可以考虑<代码>径向渐变和多个背景。

我使用CSS变量可以轻松控制形状（图像、半径、边框长度等）：


.avatar{
--r:50px；/*内半径*/
--d:10px；/*边界的长度*/
宽度：计算值（2*（var（--r）+4*var（--d）+1px）；
高度：计算（2*（var（--r）+4*var（--d）+1px））；
背景：
径向梯度(
透明var（--r），
#eee计算（var（--r）+0*var（--d）+1px），#eee计算（var（--r）+1*var（--d）），
#ddd计算（var（--r）+1*var（--d）+1px），#ddd计算（var（--r）+2*var（--d）），
#ccc计算（var（-r）+2*var（-d）+1px），#ccc计算（var（-r）+3*var（-d）），
#bbb计算（var（--r）+3*var（--d）+1px），#bbb计算（var（--r）+4*var（--d）），
透明计算（var（--r）+4*var（--d）+1px）），
var（--im）中心/封面内容框；/*用于图像的内容框，以避免边缘问题*/
边界半径：50%；
填充：2px；/*此填充用于边缘问题的内容框*/
框大小：边框框；
显示：内联块；
}
身体{
背景：粉红色；
}
插入的
框阴影（您在示例中尝试使用的阴影）不会在图像顶部绘制。您可以将元素放置在包含插入框阴影的图像顶部，或者更好的是，放置在径向渐变背景图像上：


。图片{
显示：内联块；
位置：相对位置；
}
.图片img{
垂直对齐：底部对齐；
}
.图片：：之后{
内容：“；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景图像：径向渐变（圆最近的边，
透明49%，
#999 50%, #999 59%,
#aaa 60%，#aaa 69%，
#bbb 70%，#bbb 79%，
#ccc 80%，#ccc 89%，
#ddd 90%，#ddd 99%，
#eee 100%
);
}
适用于
框阴影
和
边界半径