为多个边框编写CSS的好方法是什么? [英] What is a good way to write CSS for multiple borders?

问题描述

我正在尝试构建多个边框，这些边框在用户图像周围逐渐消失.我正在这样编写CSS，但这无济于事:

I am trying to build multiple borders which are getting faded around the user image. I am writing the CSS like this, but this won't help:

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;

但是它没有提供预期的输出.我该如何实现?

But it doesn't give the output as expected. How do I achieve this?

推荐答案

在border-radius

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

img {
  margin: 40px;
  width: 90px;
  border-radius: 50%;
  box-shadow:
    0 0 0 10px #817dd1,
    0 0 0 20px #5c58aa,
    0 0 0 30px #3d3a84,
    0 0 0 40px #211f56;
}
div {
  background: #100f35;
  width: 170px;
}

<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>

如果您不希望使用div，则

If you want without a div,

img {
  margin:40px;
  width: 90px;
border-radius: 50%;
box-shadow:
    0 0 0 10px #817dd1,
    0 0 0 20px #5c58aa,
    0 0 0 30px #3d3a84,
    0 0 0 40px #211f56;

}

<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">

使用您的配色选中此小提琴

这篇关于为多个边框编写CSS的好方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！