Css 创建圆形按钮的更好方法是什么：<；img>；，还是背景图像？

我有两种创建圆形按钮的方法： 它们看起来都一样，但我不确定哪种方式更稳定、更跨平台、更实用等等。我只有一部android手机可以测试，而且两款手机看起来都不错。我应该使用一种方法而不是另一种，为什么

方法一：

内部的

，允许用户在img上获取上下文菜单

---

使用图像作为内容，

背景图像

作为设计元素。在您的情况下，按钮是您设计的一部分，应该使用

背景图像

我更喜欢背景版本。在我看来，图像应该只用于显示图像。如果只是在布局/设计中需要图像，请不要使用图像。正如我所说：这里没有真实的事实，只有我的观点。@LinusCaldwell:相反，有人可能会说，

背景图像

应该只用于背景。不要使用背景来提供前景内容。如果按钮使用背景图像，链接使用普通文本，则通过技术辅助浏览（如盲人浏览）生成的页面更容易阅读。此外，通过使用CSS设置样式，将按钮和按钮上的文本分开，您可以更轻松地进行外观更新。

<div class="method1">
  <img src="http://i.imgur.com/TLFDrvp.jpg" />
</div>

.method1 {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}

<div class="method2"></div>

.method2 {
    background: url(http://i.imgur.com/TLFDrvp.jpg);
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}