如何创建一个CSS外圈来保存图像作为内圈 [关闭]-解网

问：

编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

2天前关闭。

改进此问题

我想创建一个外圈来将图像作为内圈，但我应用的样式不起作用。我已经附上了我试图实现的目标的图像和我尝试实现的代码。在此处输入图像描述

我尝试过这种风格来实现它，但它不起作用。我给 CSS 选择器的样式是宽度 25rem、高度 25rem、边框 1px 实心，边框半径为 50%，将其相对定位并为其提供蓝色背景，但它没有将其应用于它们。

HTML CSS CSS 选择器

:root{
  /* Circle diameter */
  --d:25rem;
  /* Difference in size between inner & outer */
  --delta:2rem;
  /* Border radius used to describe a circle */
  --r:50%;
  /* width of outer circle border */
  --b:0.25rem;
}

/* The outer circle that holds the image */
.circular-frame{
  width:var(--d);
  height:var(--d);
  border-radius:var(--r);
  
  border:var(--b) solid black;
  background:blue;
  overflow:hidden;
  
  /* ensure image is centred within outer circle */
  display:flex;
  justify-content:center;
  align-items:center;
  
  margin:1rem auto;
}
/* The inner-circle image - smaller than outer circle. */
.circular-frame img{
  width:calc(var(--d) - var(--delta));
  height:calc(var(--d) - var(--delta));
  border-radius:var(--r);
}

<div class='circular-frame'>
  <img src='//placekitten.com/600/600' alt='fluffball' title='circular image within circular container'>
</div>

上一个：如何使用css选择器选择父母的兄弟姐妹div [duplicate]

下一个：HTML 元素上的多个类似乎不起作用 [已关闭]

如何创建一个CSS外圈来保存图像作为内圈 [关闭]

How to create a CSS outercircle to hold an image as an inner Circle [closed]

评论