如何创建 CSS 外圆来将图像作为内圆

Question

我想创建一个外圆来将图像作为内圆，但我应用的样式不起作用。我附上了我想要实现的目标的图像以及我尝试实现的代码。

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

Answer 1

由于您没有发布实际代码，因此很难知道为什么您无法设置元素的样式以使其按照图像显示，但这也许会有所帮助。如果您愿意，使用 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>