图片显示错误

Question

我想为用户界面创建一些简洁的圆形按钮，但我不能使用 divs，因为那时链接将不起作用。

我得到了一个带有 border-radius 属性的圆形图像，它的宽度和高度均为 50 像素。内部图像的尺寸减小到 30 像素以看起来更好，并且引入了 10 像素 padding 使总共 50 像素，不包括边框。

但是，我希望 border-radius 仅应用于边框，而不是内部图像。有什么方法可以解决这个问题 w/o 使用 div?

CSS

img.userinterface {
  width: 30px;
  height: 30px;
  padding: 10px;
  background: #fff;
  border: 3px solid #ddd;
  border-radius: 50%;}

一个基本的html如果你想看看：

HTML

<img class="userinterface" src="xyz">

Answer 1

如果您的问题是 border-radius 没有考虑到 padding，请尝试使用 box-sizing: border-box;，看看这是否会对图像的显示方式产生影响。

Answer 2

当你可以按原样进行 link 回合时，为什么要额外 img

a {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 10px;
  background: #fff url(http://lorempizza.com/100/100/) center center;
  border: 3px solid #ddd;
  border-radius: 50%;
}
a:hover {
  border-color: green;
}

<a href="#"></a>

图片显示错误

Image displaying wrong

html

css

image

padding

CSS

HTML