web-dev-qa-db-ja.com

複数の境界線用の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;

Enter image description here

しかし、期待どおりの出力が得られません。どうすればこれを達成できますか？

htmlcssborderbox-shadow
25
Piyush

使用する box-shadowと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なしでしたい場合は、

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

あなたの色の組み合わせで このフィドルをチェックしてください

41
Udhay Titus

_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() colorationを使用して、手動で色を変更することなく簡単に色を調整できます。

_.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_を使用しています

10
Temani Afif

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