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>

边界半径不起作用

2 个答案: