這里的問題是子元素不繼承父元素的border-radius.有兩種方法可以實現您想要的：您可以將子元素的border-radius設置為匹配或大于父元素的radius,或者將父元素的overflow屬性設置為hidden.
這是一個快速的片段,說明了問題和兩個解決方案：
*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
background:#000;
border-radius:50%;
display:inline-block;
line-height:150px;
margin:10px;
text-align:center;
vertical-align:top;
width:150px;
}
p{
background:rgba(255,0,0,.25);
}
div:nth-of-type(2)>p{
border-radius:50%;
}
div:nth-of-type(3){
overflow:hidden;
}
Square hit area
Round hit area 1
Round hit area 2
如果子元素是圖像,那么您將需要使用圖像映射來裁剪其命中區域的附加技巧(Credit：Border-radius and :hover state area issue),如下所示：
*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}
div{
background:#000;
border-radius:50%;
display:inline-block;
margin:10px;
text-align:center;
vertical-align:top;
width:calc(33% - 20px);
max-width:600px;
}
img{
display:block;
cursor:pointer;
height:auto;
width:100%;
}
div:nth-of-type(2)>img{
border-radius:50%;
}
div:nth-of-type(3){
overflow:hidden;
}
)
)
)
)