0

HTML / CSSを始めたばかりなので、コードに大きな間違いがあった場合は訂正してください。

問題はこの写真に見られるとおりです（一部のブラックボックスについては申し訳ありませんが、一部のコンテンツを非表示にするだけでした。問題は上部の画像のみです）

http://i.imgur.com/XlaCi.png

写真が境界線に重なっていることがわかります。それで、CSSでそれを修正する方法があるかどうか疑問に思っていますか、それとも私の境界線の角に合うように画像を編集する必要がありますか？

これがコードです

私はインターネット全体でいくつかの調査を行いましたが、それが私の立場の絶対的または/または相対的なものと関係があるという考えがあるかもしれません。でも、全然わからないので、皆さんが私を助けてくれることを願っています

4

3 に答える 3

1

「ヘッダー」の上部にラッパー要素と同じ境界線半径を指定し、overflow：hiddenを追加してみてください。私はそれがうまくいくかもしれないと思います。

#header {
 -webkit-border-top-left-radius: 50px;
 -webkit-border-top-right-radius: 50px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 50px;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
overflow:hidden;
}

余談ですが、サイトの絶対測位を使用する必要はありません。

サイトを中央に配置するには、＃wrapper要素に「margin：0auto;」を指定するだけです。

すべてのorther要素も絶対位置を使用しています。それらを次々に流し、フロートを使用するだけです。このようなレイアウトを実現するために絶対位置を使用しないでください。

于 2012-11-12T16:40:13.427 に答える
1

css3プロパティである「border-radius」を使用している場合は、背景のクリッピングを効果的に設定する「 background-clip 」を使用することもできます。

このプロパティに使用できる値は次の3つです。

ボーダーボックス、コンテンツボックス、またはパディングボックス

コンテンツボックスを使用しようとしているものが見つかると思います（以下を参照）。

#header {background-clipping:content-box}

cssのトリックに関するすばらしい記事があります。ブックマークする価値もありますが、css/htmlの知識を深めるのに役立つ優れた情報源です。

于 2012-11-12T17:16:55.203 に答える
-1

これは少し宿題のように見えるので、コードは書きません。

ただし、画像の角を丸めるオプションがいくつかあります。簡単な順にリストします。

  • 画像をbackground-imageヘッダーのとして設定します。
  • 画像のスタイルを角が丸くなるように設定します。
  • （これは行わないでください）すでに角が丸い透明な画像を作成します。
于 2012-11-12T16:53:02.160 に答える