1

先月くらいまではすべて問題なく動作していましたが、Chrome または Webkit のいずれかが更新されてから、コードを変更していないのに何か問題が発生したようです。

私はいくつかのダイブを作成し、webkit css でそれらを丸めました。1 か月間、クロムでは丸められなくなりましたが、サファリではうまく機能します。

.hostpie {
  -webkit-transform:rotate(0deg);
  width:148px;
  height:300px;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
  border-radius:150px;
  -webkit-border-radius:150px 0 0 150px;
  -webkit-transform-origin:right center;
}
4

1 に答える 1

3

ベンダー接頭辞付きのプロパティは、CSS プロパティの前に表示する必要があります。Chrome の新しいバージョンが接頭辞なしのバージョンをサポートしている場合でも、-webkit-border-radius: 150px 0 0 150px;最後に表示されるため使用されます。公式の CSS プロパティを最後に置くことで、それを正しくサポートするブラウザーによって適用されることが保証されます。

また-webkit-border-radius: 150px;、 と-webkit-border-radius: 150px 0 0 150px;は 2 つの異なることを行っています。後者は左上隅と左下隅をターゲットにしていますが、前者は 4 つの隅すべてをターゲットにしています。なぜ両方持っているのかわからない？

順番を変えてみる

.hostpie {
 width:148px;
 height:300px;
-moz-border-radius:150px;
-webkit-border-radius:150px 0 0 150px; /* top left -- bottom left */
 border-radius:150px; /* CSS Property last */
}

ベンダープレフィックスとカスケード

于 2013-03-19T16:09:57.100 に答える