-1

私は以下のコードで遊んでいますが、私が完全に理解していないことが2つあります。1つ目は、Chromeがベンダーレスの半径仕様を受け入れているようだということです。では、なぜそこに「-webkit」を入れる必要があるのでしょうか。

-webkit-border-radius: 10px;
-moz-border-radius: 20px;
border-radius: 30px;

また、Firefoxではまったく同じコマンドが効果を発揮しないことにも気づきました。ボーダーコーナーはシャープなままです。ベンダー拡張について何かが足りませんか？

HTML

<div class="blobb">
<form id="myForm" runat="server">
  <input id="info" type="text" placeholder="Info" />
</form>
</div>

CSS

div.blobb{
  width: 200px;
  height: 100px;
  padding: 15px 25px 0 25px;
  margin: 15px 0px 15px 30px;
  cursor: default;

  border: 1px solid #666666;
  background-color: #ccaa99;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
4

1 に答える 1

0

Chromeはバージョン5で-webkit-から接頭辞なしの名前に切り替わりました。Firefoxはバージョン4で-moz-から接頭辞なしの名前に切り替わりました。詳細はこちら：caniuse.com/border-radius –ŠimeVidas7月29日13:03

于 2012-08-07T23:55:05.810 に答える