边界半径不起作用

Question

我正在尝试为个人资料图片制作圆形边框，但是我无法使CSS正常工作。 我的CSS和HTML代码如下所示

 .author-image { width: 50px; height: 50px; border-radius: 50%; } 

 <div class="author-info"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Avatar&w=150&h=150" class="author-image"> </div> 

当我在jsfiddle上尝试时，我只会得到一个正方形区域而不是一个圆形。 我在这里想念什么？

Answer 1

您在src中没有图片。 在大多数浏览器中，它会显示“未找到图像”图标。 我添加一个就可以了。

<div class="author-info">
  <img src="http://combiboilersleeds.com/images/image/image-3.jpg" class="author-image">
</div>

.author-image {
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

Answer 2

这是“边框”覆盖导致问题的空白图像。 例如，通过为图像提供背景色（或有效的图像路径；已完成操作），您可以看到边框舍入正常。

 .author-image { width: 50px; height: 50px; border-radius: 50%; background-color:#555; } 

 <div class="author-info"> <img src="" class="author-image"> </div>