0

htmlとcssのみを使用して、250x250の画像の周囲に素敵な境界線を配置しようとしています。マークアップは次のとおりです。

<div id="img-container"><img src="pic.jpg" border="0"/></div>

そして、cssは次のとおりです。

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    z-index: 10;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#img-container img {
    z-index: 5;
}

基本的に、divコンテナで、境界を超える画像のエッジをクリップする必要があります。これにより、border-radiusプロパティ（-moz-border-radius、-webkit-border-radiusなど）を使用して、丸みを帯びたエッジ効果が実現されます。これに関するヒントとコツを探しています。ありがとう。

そして、はい、私は明らかにWebデザイナーではありません:)

4

2 に答える 2

2

はい、可能ですが、CSSを使用して画像をdiv背景として設定する必要があります。

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    background-image: url('pic.jpg');
    border-radius: 10px;
}

これは必要です。そうしないと、画像の周りにひどい白い境界線が表示されます（Google Chromeでテスト済み）。

于 2010-03-16T08:23:18.130 に答える
1

私があなたの質問を理解している限り、

#img-container img {
    z-index: 5;
}

一部はトリックを行う必要があります。

または、画像を背景画像として使用することもできます。

#img-container {
    ...
    background: url(pic.jpg) no-repeat top left;
}
于 2010-03-16T08:21:35.530 に答える