web-dev-qa-db-fra.com

Quelle est la bonne façon d'écrire du CSS pour plusieurs bordures?

J'essaie de créer plusieurs bordures qui s'effacent autour de l'image de l'utilisateur. J'écris le CSS comme ça, mais cela n'aidera pas:

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;

Enter image description here

Mais cela ne donne pas la sortie comme prévu. Comment puis-je y parvenir?

htmlcssborderbox-shadow
25
Piyush

Utilisation box-shadow avec 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>

Si vous voulez sans 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">

avec votre combinaison de couleurs vérifiez ce violon

41
Udhay Titus

Vous pouvez considérer radial-gradient Et plusieurs arrière-plans.

J'ai utilisé des variables CSS pour pouvoir contrôler facilement la forme (l'image, le rayon, la longueur de la bordure, etc.):

.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>

Vous pouvez également ajuster la taille de l'image pour couvrir uniquement la partie transparente:

.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>

Dans le cas où vous aurez toujours la même couleur qui s'estompera, voici une idée utilisant la coloration hsl() où il sera facile d'ajuster la couleur sans changer manuellement chacune:

.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>

J'utilise +1px/+2px Pour éviter les effets négatifs dus à l'alias

10
Temani Afif

L'ombre de la boîte inset (celle que vous tentiez d'utiliser dans votre exemple) ne sera pas dessinée en haut de l'image. Vous pouvez positionner un élément au-dessus de l'image qui contient l'ombre de la zone d'encart, ou mieux, une image d'arrière-plan à dégradé radial:

.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>
6
Salman A