1

適切な解決策が見つかると仮定します（クロスブラウザなどは必要ありません）-

Web 上の画像の角を丸くする最良の方法は CSS/JS でしょうか。

または: 角が丸くなっている画像を使用することをお勧めします (アップロード時のコードまたはデザイナーの手作業のいずれか)?

可能な場合、要素を丸くする方法はどうですか - css 対角丸画像 (例: スプライト)?

編集CSSが可能であることは知っていますが、編集済みの画像をダウンロードするだけでなく、ブラウザの動作が難しくなると思います（サーバー側でより多くの労力がかかります）。問題は、何が機能するかではなく、何が優れているかです。

4

4 に答える 4

2

単純に角を丸くした画像を作成することもできますが、もちろん、最初に画像を生成する時間と複雑さが増します。

または、CSS を使用して何かを行うこともできます。画像を背景画像として div に設定し、CSS 3 の border-radius プロパティを使用して div の角を丸くし、同様の効果を与えます。

例えば

div {
    background-image: url(myimage.jpg);
    width: 375px;
    height: 500px;
    border: 2px solid #666;
    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    }

これは CSS 3 をサポートするブラウザーでのみ機能しますが、ブラウザー間の互換性は問題ではないと述べました。ただのアイデア:)

于 2012-05-10T10:24:55.160 に答える
0

このコードに従うことで、画像を完全な円形にすることができます。

.MyImage {
  height: 200px;
  width: 200px;
  border-radius: 100%;
}

最初に .MyImage クラスを使用して画像をターゲットにし (任意に設定できます)、次に高さと幅のプロパティを等しく設定し (等しくない限り、任意に設定できます)、完全な正方形になるようにします。次に、border-radius が 100% に設定されます。

于 2018-10-31T07:18:43.223 に答える
-1

クロスブラウザ用の単なる追加です：

img {
    border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}
于 2012-06-01T11:06:25.847 に答える
-1

角丸をサポートするすべてのブラウザーは、画像自体の角丸もサポートするようになりました。Stefが答えたように、以前は背景画像を使用する必要がありましたが、この方法ははるかに簡単です.

img {
    border-radius: 10px;
}

また

img {
    border-radius: 10px 5px 10px 2px;
}

最新バージョンの Safari、Firefox、Chrome、さらには ie9 の境界半径でさえ、接頭辞なしで完全に正常に機能するようになりました。

それは、あなたがどの程度下位互換性を持ちたいかによって異なります。互換性を確保するために背景画像の方法を使用する場合、接頭辞を使用しても、境界線の半径をサポートしていない古いブラウザーの負荷全体を除外するため、コーナーを画像の一部にすることもできます。

それが役立つことを願っています:)

于 2012-05-10T10:35:05.503 に答える