14

円形のボタンを作成するには 2 つの方法があります: http://codepen.io/anon/pen/GiHyJ どちらも同じように見えますが、どちらの方法がより安定しているか、クロスプラットフォームであるか、使用可能であるかなどはわかりません。テストする電話で、どちらも良さそうです。ある方法を他の方法よりも使用する必要がありますか?その理由は?

方法 1:<img>内で<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);
}

方法 2: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);
}
4

1 に答える 1

11

コンテンツとbackground-imageデザイン要素に画像を使用します。あなたの場合、ボタンはデザインの一部であり、使用する必要がありますbackground-image。

于 2013-03-27T20:16:10.623 に答える