为多个边框编写CSS的好方法是什么？ [重复]

Question

这个问题在这里已有答案：

• How can I get multiple borders with rounded corners? CSS 8个答案

我正在尝试构建多个边框，这些边框在用户图像周围逐渐消失。我正在写这样的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;

但它没有按预期提供输出。我该如何实现这一目标？

Answer 1

使用带有border-radius的box-shadow：

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，check here。

用你的颜色组合check this fiddle

Answer 2

你可以考虑radial-gradient和多个背景。

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

.avatar {
  --r: 50px; /* The inner radius */
  --d: 10px; /* The length of borders */
  width: calc(2*(var(--r) + 4*var(--d) + 1px));
  height: calc(2*(var(--r) + 4*var(--d) + 1px));
  background:
    radial-gradient(
      transparent var(--r),
      #eee calc(var(--r) + 0*var(--d) + 1px), #eee calc(var(--r) + 1*var(--d)),
      #ddd calc(var(--r) + 1*var(--d) + 1px), #ddd calc(var(--r) + 2*var(--d)),
      #ccc calc(var(--r) + 2*var(--d) + 1px), #ccc calc(var(--r) + 3*var(--d)),
      #bbb calc(var(--r) + 3*var(--d) + 1px), #bbb calc(var(--r) + 4*var(--d)),
      transparent calc(var(--r) + 4*var(--d) + 1px)),
    var(--im) center/cover content-box; /* content-box for the image to avoid edge issues */

  border-radius: 50%;
  padding: 2px; /* This padding is used with the content-box for the edge issue*/
  box-sizing: border-box;
  display: inline-block;
}

body {
  background: pink;
}

<div class="avatar" style="--im:url(https://picsum.photos/id/1074/800/800)"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/1069/800/800);--r:20px;"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/237/800/800);--r:60px;--d:18px;"></div>

您还可以调整图像的大小以仅覆盖透明部分：

.avatar {
  --r: 50px; /* The inner radius */
  --d: 10px; /* The length of borders */
  width: calc(2*(var(--r) + 4*var(--d) + 1px));
  height: calc(2*(var(--r) + 4*var(--d) + 1px));
  background:
    radial-gradient(
      transparent var(--r),
      #eee calc(var(--r) + 0*var(--d) + 1px), #eee calc(var(--r) + 1*var(--d)),
      #ddd calc(var(--r) + 1*var(--d) + 1px), #ddd calc(var(--r) + 2*var(--d)),
      #ccc calc(var(--r) + 2*var(--d) + 1px), #ccc calc(var(--r) + 3*var(--d)),
      #bbb calc(var(--r) + 3*var(--d) + 1px), #bbb calc(var(--r) + 4*var(--d)),
      transparent calc(var(--r) + 4*var(--d) + 1px)),
    var(--im) center/calc(2*var(--r) + 2px) calc(2*var(--r) + 2px) no-repeat;

  border-radius: 50%;
  display: inline-block;
}

body {
  background: pink;
}

<div class="avatar" style="--im:url(https://picsum.photos/id/1074/800/800)"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/1069/800/800);--r:20px;"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/237/800/800);--r:60px;--d:18px;"></div>

---

如果你总是有相同的颜色会褪色，这里有一个想法使用hsl()着色，很容易调整颜色，而无需手动更改每一个：

.avatar {
  --r: 50px; /* The inner radius */
  --d: 10px; /* The length of borders */
  --c: 230,80%; /* The base color*/ 
  width: calc(2*(var(--r) + 4*var(--d) + 1px));
  height: calc(2*(var(--r) + 4*var(--d) + 1px));
  background:
    radial-gradient(
      transparent var(--r),
      hsl(var(--c), 20%) calc(var(--r) + 0*var(--d) + 1px), hsl(var(--c), 20%) calc(var(--r) + 1*var(--d)),
      hsl(var(--c), 40%) calc(var(--r) + 1*var(--d) + 1px), hsl(var(--c), 40%) calc(var(--r) + 2*var(--d)),
      hsl(var(--c), 60%) calc(var(--r) + 2*var(--d) + 1px), hsl(var(--c), 60%) calc(var(--r) + 3*var(--d)),
      hsl(var(--c), 80%) calc(var(--r) + 3*var(--d) + 1px), hsl(var(--c), 80%) calc(var(--r) + 4*var(--d)),
      transparent calc(var(--r) + 4*var(--d) + 1px)),
    var(--im) center/calc(2*var(--r) + 2px) calc(2*var(--r) + 2px) no-repeat;

  border-radius: 50%;
  display: inline-block;
}

body {
  background: pink;
}

<div class="avatar" style="--im:url(https://picsum.photos/id/1074/800/800)"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/1069/800/800);--r:20px;--c: 20,50%;"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/237/800/800);--r:60px;--d:18px;--c: 130,80%;"></div>

我使用+1px / +2px来避免由于别名造成的不良影响

Answer 3

inset框阴影（您在示例中尝试使用的阴影）不会在图像上绘制。您可以将元素放置在包含插入框阴影的图像顶部，或者更好，放置径向渐变背景图像：

.picture {
  display: inline-block;
  position: relative;
}

.picture img {
  vertical-align: bottom;
}

.picture::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: radial-gradient(circle closest-side,
    transparent 49%,
    #999 50%, #999 59%,
    #aaa 60%, #aaa 69%,
    #bbb 70%, #bbb 79%,
    #ccc 80%, #ccc 89%,
    #ddd 90%, #ddd 99%,
    #eee 100%
  );
}

<div class="picture">
  <img src="https://picsum.photos/id/237/256/256">
</div>