我有两种创建圆形按钮的方法:http ://codepen.io/anon/pen/GiHyJ 它们看起来都一样,但我不确定哪种方式更稳定、跨平台、可用等。我只有一个 android手机测试一下,两个都好看。我应该使用一种方法而不是另一种方法,为什么?
方法一:<img>
在 a<div>
中,允许用户在 img 上获取上下文菜单。
<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);
}
方法二:background: url
在<div>
. 少加价。
<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);
}