图片显示错误

Question

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

我有一个带有 border-radius 属性的圆角图像，宽50像素，高。内部图像的尺寸减少到30像素，看起来更好，并且引入了10像素填充，总共50个像素，不计算边框。

但是，我希望仅在边框上应用 border-radius ，而不是在其中应用的图像。有没有办法解决这个问题而不使用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

为什么额外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>

Answer 2

如果您的问题是border-radius没有考虑padding，请尝试使用box-sizing: border-box;，看看是否会影响图片的显示效果。