一般的な CSS スタイル (1):background_html/css_WEB-ITnose

動画に従ってHTMLとCSS（HTML5とCSS3を除く）をざっくりと覚えた後、体系的に復習してまとめる必要があると感じました。最初の記事では、小さなデモを使用して背景の使用法を要約します。

デモ: Button

デモは次のとおりです (ローカル画像が含まれるため、プレビュー効果に問題があります):
https://jsfiddle.net/ChasonZhang/185mmr99/
効果は次のとおりです:

ボタンソース (Amazon) ボタンスタイル):

上記のボタンスタイルを確認した後、私が考えた解決策は次のとおりです:

最も単純: テキストのない画像を背景スタイルとして直接使用します。このボタンの欠点は、さまざまなボタン幅 (上の図のログイン ボタンや購入ボタンなど) に適していることです。デザイナーは繰り返し描画する必要があり、余分な作業が追加され、再利用性に欠けます。

最も完璧: 描画には CSS を使用します: Linear-gradient と border-radius。欠点は、IE の一部の古いバージョン (特定のバージョンは確認する必要があります。IE8 以下だと思います) と互換性がないことです。境界半径あり。

最も互換性: 画像の使用と CSS 描画を組み合わせます。

3 番目の方法では、background 属性が最大限に活用されます。

背景

次の図は、w3c の背景の属性リストです:

簡単な実験の後、次の結論が導き出されます:

スタイルの説明: スタイリング

スタイルコードは次のとおりです:

<style type="text/css">body { margin: 0;}.btn { margin: 20px auto; width: 135px; height: 31px;    background-image: url(img/btn.jpg);    background-repeat: repeat-x;}.btnL {    height: 31px;    background-image: url(img/btnL.jpg);    background-repeat: no-repeat;}.btnR {    height: 31px;    background-image: url(img/btnR.jpg);    background-repeat: no-repeat;    background-position: right;    line-height: 31px;    text-align: center;    font-size: 14px;}</style>

スタイル全体のアイデアは次のとおりです:

レイアウトの説明: コーディング

コードは次のとおりで、基本的な 3 層のネストされたレイアウトです。

このレイアウトを構築するとき、理解する必要がある質問があります: なぜ .btnR を .btnL の中に配置する必要があるのですか?
.btnの中に.btnLが入っているのは分かりますが、.btnLと.btnRは並列関係にないのでしょうか？ .btnR が .btnL 内に配置されずに並置されていると仮定すると、ボタンの背景の両側に丸い角の位置がずれてしまう影響が生じます。その理由は、2 つのブロックレベルの要素が幅と高さを持ち、占有しているためです。それぞれ1行ずつ。

概要

CSS3 の開発により、この小さなデモは現在同様のスタイルを解決する最良の方法ではありませんが、**CSS スライディング ドア** の原理が含まれています (ここ数年で非常に人気のある方法です。参照) Chuanzhi Podcast のナビゲーション バーに移動します)。もちろん、ここでは主に背景の使用法を要約するために、この小さなデモを例として取り上げます。