4

画像に1ピクセルの境界線を追加しました。同時に、画像のエッジに半径を付けようとしています。私の問題は、画像がすでにフォトショップで丸みを帯びているため、エッジの境界が本来よりも薄く見えることです

こちらから確認できます。

http://jsfiddle.net/fVNgA/

どうすれば境界線を均​​等にすることができますか？

img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }
<img src='http://carantina.com/wp/wp-content/themes/new/images/home_pic1.jpg'>​
4

4 に答える 4

3

画像をにラップしてspan追加cssします

http://jsfiddle.net/96wVp/

于 2012-10-24T10:54:31.177 に答える
1

「padding：1px;」を追加します 画像スタイルに:)

ちなみに、これは同様の問題を概説する別のスレッドであり、その理由は次のとおりです。CSS3border-radiusプロパティ。Chromeではコーナーが薄すぎますか？

于 2012-10-24T10:47:31.813 に答える
1

Chromeは、内側の境界線に正方形のコーナーを使用しています。そのため、Chromeでは、正確な感触を得ることができません。Firefoxの場合と同様に、内側の境界線にも丸みを帯びた角が使用されます。

ChromeとFirefoxのスクリーンショット

私のアドバイスは、ジェネリックを含める方が良いということです。border-radiusまた、Chromeの場合、修正はとを追加することoverflow: hidden;ですpadding: 1px;。

CSS

img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; /* Add this for fallback */
    overflow: hidden; /* Hack for Chrome */
    padding: 1px; /* Hack for Chrome */
    border: 1px solid #000;
}

Chromeハック後

于 2012-10-24T10:47:54.417 に答える
1

問題は、それがどのように適用されるか、そしてあなたが使用している画像ほど境界線ではありません。Photoshopで半径6pxの角を丸めて、背景が透明なpngとして保存してみてください。何が起こっているのかというと、境界線を配置していて、境界線が実際に画像の隅の下を移動しているということです。画像はjpgであり、jpgは透明度をサポートしていないため、丸みを帯びた角には実際には正方形の白い角があります。これは、jpgではなく透明な画像を使用した画像の例です。 http://jsfiddle.net/calder12/fVNgA/6/

コードなしでフィドルを投稿できないという理由だけでコードを作成する...時にはそれが理にかなっている>。>

<style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }    </style>
<img src='http://calderonline.com/images/home_pic1.png'>​
于 2012-10-24T10:52:54.463 に答える