border-radius无法使嵌套在a标签内的img元素变为圆形

Question

发现 a 标签内的元素高度和img高度不相等

    <a href="#">

        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3979058804,967901392&fm=26&gp=0.jpg" alt="美" width=200>

    </a>

2.

使用border-radius无法使该img标签变为圆形

<div class="alice">

  <div style="padding: 10px;opacity: 0.8;">

    <a href="#">

    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3979058804,967901392&fm=26&gp=0.jpg" alt="美" width=200 style="border-radius: 10px"></a>

  </div>

  <div class="topic">

    人物

  </div>

</div>

jsfiddle

希望各位大佬们可以帮忙解答下，感激不尽。

Answer 1

明显是高度不够了，你人物两个字把图片下边遮住了，去掉看看