Html 在多个子零部件上创建圆形边界半径

所以我想做的是在它里面有一个圆圈，包含一个图像和一个描述，它以50%的不透明度覆盖图像。以下是迄今为止的结果：

因此，很明显，我希望整个div都有这个

边界半径

，到目前为止，我必须将

父级

和

img

组件设置为有这个特定的

边界半径

。我想知道的是如何让所有元素都有一个圆半径

（可能使用

边界半径：XX%而非边界半径：XXpx；

）的奖励积分）。以下是我迄今为止所尝试的：

JSX

return(
  <div className="container">
    <img src={this.props.src} alt=""/>
    <div className="descriptor">
      <h4>{this.props.title}</h4>
    </div>
  </div>
);

---

下面是一个带有相应CSS样式属性注释的演示

.roundc{
宽度：300px；/*边界半径的宽度和高度必须相等*/
高度：300px；/*50%用于工作并使正方形呈圆形*/
显示：内联块；
边界半径：50%；/*使容器成为圆形*/
边框：3倍纯红；
溢出：隐藏；/*隐藏内容溢出*/
位置：相对；/*在img上使用绝对定位*/
}
.roundc img{/*以使大图像居中*/
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.圆C跨度{
位置：绝对位置；
z指数：1；
背景：红色；
颜色：白色；
宽度：300px；
高度：30px；
文本对齐：居中；
底部：0；
}

关于我

您需要的是边界半径50%，如果有多个容器需要应用此方法，只需使用类即可。太好了，我认为

溢出：隐藏

是我缺少的。谢谢@RyanTurnbull没问题：）

.container{
  margin: 20px;
  height: 200px;
  width: 200px;
  border-radius: 20px;
  position: relative;
  border-radius: 100px;

  display: inline-block;
  border-radius:100px;
  border:2px solid red;
}

.container img{
   max-width:100%;
   border-radius:100px;
   float: left;
}

.descriptor{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  opacity: 0.5;
  /*NOTE: Here i have tried using things like border-bottom-left-radius: 750px;
    But yeah that didnt work*/
}