在多个子组件上创建圆形边框半径

Question

所以我想要做的是在它里面有一个圆圈，包含一个图像和一个描述，它以50％的不透明度覆盖图像。见到目前为止的结果：

所以，显然，我希望整个div都有border-radius，到目前为止，我必须设置parent和img组件才能确定border-radius 。我想知道的是如何使所有元素具有圆形半径，

（奖励积分可能使用border-radius: XX% and not border-radius: XXpx;）。继承了我到目前为止所尝试的内容：

JSX

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

CSS

.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*/
}

Answer 1

这是一个演示，其中包含适当的CSS样式属性的注释。

.roundc{
width:300px;  /*Width and height need to be equal for border radius*/
height:300px; /*50% to work and make the square circular */
display:inline-block;
border-radius: 50%;  /*Make the container circular */
border:3px solid red;
overflow: hidden;   /*Hide the content overflow */
position:relative;  /*To use absolute positioning on img*/
}

.roundc img{ /*To center the large image */
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

.roundc span{
position:absolute;
z-index:1;
background:red;
color:white;
width:300px;
height:30px;
text-align:center;
bottom:0;
}

<div class="roundc">
  <img src="http://via.placeholder.com/350x350">
  <span> About me </span>
</div>