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

disho6za 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(85)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
2天前关闭。
Improve this question的
我想创建一个外圆举行的图像作为一个内圈，但我应用的样式不工作.我已经附上了我试图实现的图像和代码，我试图它. enter image description here
我已经尝试过这种风格来实现它，但它不工作。我给予CSS选择器的样式的宽度25雷姆高度25雷姆边界1像素固体的边界半径为50%的位置，它相对和给予它一个蓝色的背景，但它不适用于他们。

css

来源：https://stackoverflow.com/questions/77500232/how-to-create-a-css-outercircle-to-hold-an-image-as-an-inner-circle

1条答案

按热度按时间

siv3szwd1#

因为你没有发布任何实际的代码，所以很难理解为什么你不能将元素的样式设置为按照图片显示，但也许这会有所帮助。

: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);
}

个字符

赞(0）回复(0）举报 2023-11-19

我来回答

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

1条答案

相关问题

热门标签

最新问答