/* このコードは、マウスがリンク上をスライドするときのグラデーション効果を実装します*/
{
色: #007c21;
トランジション: カラー .4 秒の簡単さ。
}
a:ホバー { カラー: #00bf32;CSS3 を使用すると、追加のマークアップや画像を導入することなく、フォーム要素、画像、段落テキストなど、ほとんどの要素の角を丸く作成できます。
<!DOCTYPE html> <html lang="ja"> <頭> <meta charset="utf-8" /> <title>丸い角</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </head> <本文> <div class="オールコーナー"></div> <div class="one-corner"></div> <div class="elliptical-corners"></div> <div class="circle"></div> </body> </html>
CSS の角丸を使用した 4 つの例。古いバージョンの Android、Mobile Safari、Safari ブラウザをサポートするために必要なベンダー プレフィックスが含まれています。 .circleの場合、要素は150像素*150像素あるため、 75pxを使用すると50%と同じ効果があります。
ディビジョン {
背景: #999;
フロート: 左;
高さ: 150ピクセル;
マージン: 10px;
幅: 150ピクセル;
}
.all-corners {
-webkit-border-radius: 20px;
境界半径: 20px;
}
.one-corner {
-webkit-border-top-left-radius: 75px;
ボーダー左上の半径: 75px;
}
.elliptical-corners {
-webkit-border-radius: 50 ピクセル / 20 ピクセル;
境界半径: 50 ピクセル / 20 ピクセル;
}
。丸 {
-webkit-border-radius: 50%;
境界半径: 50%;
}ディビジョン {
背景: #ff9;
境界線: 5px 実線 #326795;
フロート: 左;
高さ: 150ピクセル;
マージン: 10px;
幅: 150ピクセル;
}
.example-1 {
/* 左上隅と右下隅の半径を 10 ピクセルにし、
右上隅と左下隅 20px */
境界半径: 10px 20px;
}
.example-2 {
/* 左上隅の半径を 20px にし、他のすべての隅を 0 にします */
境界半径: 20px 0 0;
}
.example-3 {
/* 左上隅の半径を 10px、右上隅の半径を 20px にします。
右下隅は 0、左下隅は 30px */
境界半径: 10px 20px 0 30px;
}-webkit-border-radius: rと入力します。ここで、 r長さ (単位付き) で表されるフィレットの半径です。 border-radius: rと入力します。ここで、 rフィレットの半径です。手順 1 と同じ値を使用します。これは、このプロパティの標準の短い形式の構文です。-webkit-border-top-left-radius: rと入力します。ここで、 r長さ (単位付き) で表される左上隅の半径です。最初のステップと同じr値を使用してborder-top-left-radius: rと入力します。これは、このプロパティの標準的な長い形式の構文です。右上隅を作成するには、 top-right使用します。右下隅を作成するには、 bottom-rightを使用します。左下隅を作成するには、 bottom-leftを使用します。-webkit-border-radius: x/yと入力します。ここで、 xは水平方向のフィレットの半径、 y垂直方向のフィレットの半径で、どちらも長さ (単位付き) で表されます。 。 border-radius: x/yと入力します。ここで、 xとy最初のステップの値と同じです。-webkit-border-radius: rと入力しますr要素の半径 (長さの単位) です。円を作成するには、短い形式の構文を使用しますrの値は、要素の高さまたは幅の半分に等しくなければなりません。 border-radius: rと入力します。r は要素の半径 (長さの単位付き) で、最初のステップのrと同じです。これは、プレフィックスのない標準の構文です。注: border-radiusをサポートしていない古いブラウザでは、四角い角を持つ要素のみがレンダリングされます。 border-radius 、スタイルが適用される要素の角にのみ影響し、その子要素の角には影響しません。したがって、子要素に背景がある場合、その背景が 1 つ以上の親要素の角に表示され、角丸スタイルに影響を与える可能性があります。場合によっては、要素の背景 (ここでは子要素の背景ではありません) が、丸い角を通して見えることがあります。これを回避するには、要素のborder-radius宣言の後にスタイル ルールを追加します ( background-clip: padding-box; 。
text-shadowを使用すると、テキストを表す画像を使用せずに、段落、タイトル、その他の要素のテキストに動的なシャドウ効果を追加できます。
text-shadow:と入力します。 x-offset (水平オフセット)、 y-offset (垂直オフセット)、 blur-radius (ぼかし半径)、 colorをそれぞれ表す値を入力します (最初の 3 つの値には長さの単位があり、カンマはありません) 4 つの値の間で区切られます)、たとえば、 -2px 3px 7px #999です。text-shadow:と入力します。 x-offset (水平オフセット)、 y-offset (垂直オフセット)、 blur-radius (ぼかし半径)、およびcolor値をそれぞれ入力します (最初の 3 つの値には長さの単位があり、カンマはありません) 4 つの値の間の分離)。 blur-radiusの値はオプションです。 「,」(カンマ) を入力します。 4 つのプロパティに異なる値を使用して手順 2 を繰り返します。<!DOCTYPE html> <html lang="ja"> <頭> <meta charset="utf-8" /> <title>テキストシャドウ</title> <link rel="stylesheet" href="css/text-shadow.css" /> </head> <本文> <p class="basic">基本的なシャドウ</p> <p class="basic-negative">基本的なシャドウ</p> <p class="blur">ぼかし半径</p> <p class="blur-inversed">ぼかし半径</p> <p class="multiple">複数のテキスト シャドウ</p> </body> </html>
体 {
背景: #fff;
カラー: #222;
フォント: 100%/1.05 ヘルベチカ、サンセリフ;
パディングトップ: 20px;
}
p {
color: #222; /* ほぼ黒 */
フォントサイズ: 4.5em;
フォントの太さ: 太字;
マージン: 0 0 45px;
}
p:last-child {
マージン: 0;
}
.basic {
テキストシャドウ: 3px 3px #aaa;
}
/* 負のオフセットを使用します。正と負のオフセットを混合することもできます。 */
.basic-negative {
text-shadow: -4px -2px #ccc; #aaa より少し明るいグレー */
}
.blur {
テキストシャドウ: 2px 2px 10px グレー;
}
.blur-inversed {
色: 白;
text-shadow: 2px 2px 10px #000; /* 黒 */
}
/* この例には 2 つのシャドウがありますが、次のシャドウを含めることもできます
それぞれをカンマで区切って詳細を表示します */
。複数 {
テキストシャドウ:
2px 2px 白、
6px 6px rgba(50,50,50,.25);
}これらのクラスは、いくつかのtext-shadow効果を示します。 1 番目、2 番目、5 番目はすべて、ブラー半径の値を省略しています。 .multipleクラスは、属性の各セットをカンマで区切って、複数のシャドウ スタイルを 1 つの要素に追加できることを示します。このように、複数の影スタイルを組み合わせることで、特別で興味深い効果を作成できます。
つまり、 text-shadow: none;この属性は入力する必要はなく、製造元のプレフィックスを使用します。
text-shadowプロパティは、長さの単位を持つx-offset 、長さの単位を持つy-offset 、長さの単位を持つオプションのblur-radius 、およびcolor値の 4 つの値を受け入れます。 blur-radiusが指定されていない場合、その値は 0 であるとみなされます。 x-offsetとy-offset値は正または負の整数にすることができます。つまり、 1pxと-1pxは両方とも有効です。 blur-radius値は正の整数である必要があります。 3 つの値はすべて 0 にすることができます。 text-shadowの構文は、border プロパティと background プロパティの構文に似ていますが、border と background のような 4 つの個別のプロパティ値を指定することはできません。 text-shadowが指定されていない場合は、初期値noneが使用されます。
text-shadowプロパティを使用して要素のテキストに影を追加し、 box-shadowプロパティを使用して要素自体に影を追加します。基本プロパティ セットは同じですが、 box-shadow insetキーワード プロパティとspreadプロパティ (シャドウの拡大または縮小に使用) という 2 つのオプション プロパティも使用できます。
box-shadow属性は、長さ単位を持つx-offsetとy-offset 、長さ単位を持つオプションのblur-radius 、長さ単位を持つオプションのinsetキーワード、長さ単位を持つオプションのspread値、およびcolor値の 6 つの値を受け入れます。 blur-radiusとspreadの値が指定されていない場合は、0 に設定されます。
<!DOCTYPE html> <html lang="ja"> <頭> <meta charset="utf-8" /> <title>ボックスシャドウ</title> <link rel="stylesheet" href="css/box-shadow.css" /> </head> <本文> <div class="shadow"> <p>ぼかしのあるシャドウ</p> </div> <div class="shadow-negative"> <p>負のオフセットとブラーを使用したシャドウ</p> </div> <div class="シャドウスプレッド"> <p>ブラーとスプレッドを使用したシャドウ</p> </div> <div class="shadow-offsets-0"> <p>オフセット 0、ブラー、スプレッドのシャドウ</p> </div> <div class="inset-shadow"> <p>差し込みシャドウ</p> </div> <div class="multiple"> <p>複数の影</p> </div> <div class="シャドウネガティブスプレッド"> <p>ぼかしと負の広がりのあるシャドウ</p> </div> </body> </html>
体 {
背景: #000;
色: #fff;
}
h1 {
フォントファミリー: サンセリフ;
フォントサイズ: 2.25em;
行の高さ: 1.1;
テキスト整列: 中央;
}
/* 注: サイトを整理するときによくあることですが、画像をサブフォルダー (「img」と呼びます) に配置しているため、以下の背景画像の URL は書籍に示されている例とは異なります。このような状況で背景画像の URL を構築する方法を理解するのに役立つと思いました。URL は、画像を表示している HTML ページではなく、スタイル シートが存在する場所に相対していることに注意してください。
.night-sky {
背景色: ネイビー /* フォールバック色 */
背景画像:
URL(../img/ufo.png)、
URL(../img/stars.png)、
URL(../img/stars.png)、
url(../img/sky.png);
背景位置:
50% 102%、
100% -150px、
0～150ピクセル、
50% 100%;
バックグラウンドリピート:
リピートなし、
リピートなし、
リピートなし、
繰り返し-x;
高さ: 300ピクセル;
margin: 25px auto 0 /* 本とは少し異なります */
パディングトップ: 36px;
幅: 75%;
}上記のプログラムは、 box-shadow使用して 1 つ以上の影を追加する効果を示すために使用されます。最初の 5 つのクラスはそれぞれ、互いに異なるシェーディング スタイルを適用します。最後のクラスは 2 つのシャドウを適用します (さらに多くのシャドウを適用できます)。 box-shadowを理解できないブラウザは、これらの CSS スタイル ルールを単純に無視し、影なしでページをレンダリングします。
-webkit-box-shadow:と入力します。 x-offset 、 y-offset 、 blur-radius 、 spread 、 colorそれぞれ表す値を入力します (最初の 4 つの値には長さの単位があります) (例: 2px 2px 5px #333 )。 box-shadow:と入力し、手順 2 を繰り返します。-webkit-box-shadow:と入力します。 x-offset 、 y-offset 、 blur-radius 、 spread 、 colorそれぞれ表す値を入力します (最初の 4 つの値はすべて長さの単位を持ちます) (例: 2px 2px 5px #333 )。コロンの後にinsetを入力し、その後にスペースを入力します (2 番目のステップの前にinsetとスペースを入力することもできます)。 box-shadow: 」と入力し、手順 2 と 3 を繰り返します。-webkit-box-shadow:と入力します。 x-offset 、 y-offset 、 blur-radius 、 spread 、 colorそれぞれ表す値を入力します (最初の 4 つの値はすべて長さの単位を持ちます) (例: 2px 2px 5px #333 )。必要に応じて、 insetキーワードを含めます。カンマを入力してください。属性ごとに異なる値を使用してステップ 2 を繰り返します。 box-shadow: 」と入力し、手順 2 ～ 4 を繰り返します。-webkit-box-shadow: none;と入力します。 box-shadow: none;と入力します。注: x-offset 、 y-offset 、およびspread値は、正または負の整数にすることができます。 blur-radius値は正の整数である必要があります。 3 つの値はすべてゼロにすることができます。 insetキーワードを使用すると、要素内に影を配置できます。
複数の背景をほぼすべての要素に適用できます。
<!DOCTYPE html> <html lang="ja"> <頭> <meta charset="utf-8" /> <title>複数の背景</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </head> <本文> <div class="夜空"> <h1>夜空に...</h1> </div> </body> </html>
...
.night-sky {
背景色: ネイビー /* フォールバック色 */
背景画像:
URL(../img/ufo.png)、
URL(../img/stars.png)、
URL(../img/stars.png)、
url(../img/sky.png);
背景位置:
50% 102%、
100% -150px、
0～150ピクセル、
50% 100%;
バックグラウンドリピート:
リピートなし、
リピートなし、
リピートなし、
繰り返し-x;
高さ: 300ピクセル;
margin: 25px auto 0 /* 本とは少し異なります */
パディングトップ: 36px;
幅: 75%;
}単一の要素に複数の背景画像を適用します (ベンダー プレフィックスを使用する必要はありません)
background-color: bと入力します。ここで、 b は要素に適用する代替背景色です。 background-image: uと入力します。ここで、 u絶対パスまたは相対パスで参照されるurlのリストです (カンマで区切られます)。複数の背景をサポートするブラウザの場合、画像は階層化され、互いに重なり合います。リストの最初の画像は次のように区切られます。 ) background-position: pと入力します。ここで、 pはx-offsetとy-offsetのペア (正または負にすることができます。長さの単位またはキーワード ( center topなど)) を指定します。カンマ。 2 番目のステップで指定したurlごとに、 x-offsetとy-offsetのセットが存在する必要があります。 background-repeat: rと入力します。ここで、 r 、コンマで区切られたrepeat-x 、 repeat-y 、またはno-repeat値であり、2番目のステップで指定したurlごとに1つの値です。複数の背景画像の場合は、カンマを使用して背景パラメータの各セットを区切る、標準の短い形式の構文を使用できます。この表現の利点は、開発者が代替背景色または古いブラウザ用の画像を指定できることです。
.night-sky {
/* 色と画像の両方を使用したフォールバック */
背景: ネイビー URL(../img/ufo.png) リピートなし中央下。
/* サポートしているブラウザ用 */
背景：
url(../img/ufo.png) 繰り返しなし 50% 102%、
url(../img/stars.png) リピートなし 100% -150px、
url(../img/stars.png) 繰り返しなし 0 -150px、
url(../img/sky.png) 繰り返し-x 50% 100%;
高さ: 300ピクセル;
マージン: 25px 自動 0;
パディングトップ: 36px;
幅: 75%;
}<!DOCTYPE html> <html lang="ja"> <頭> <meta charset="utf-8" /> <title>グラデーションの背景</title> <link rel="stylesheet" href="css/gradients.css" /> </head> <本文> <div class="vertical-down"><p>デフォルト</p></div> <div class="vertical-up"><p>トップへ</p></div> <div class="horizontal-rt"><p>右へ</p></div> <div class="horizontal-lt"><p>左へ</p></div> <div class="angle-bot-rt"><p><br />右下</p></div>へ <div class="angle-bot-lt"><p><br />左下</p></div>へ <div class="angle-top-rt"><p>右上</p></div> <div class="angle-top-lt"><p>左上へ</p></div> <div class="angle-120deg"><p>120 度</p></div> <div class="angle-290deg"><p>290 度</p></div> <section class="radial"> <div class="radial-center"><p>デフォルト</p></div> <div class="radial-top"><p>上部</p></div> <div class="radial-size-1"><p>100 ピクセル、50 ピクセル</p></div> <div class="radial-size-2"><p>70% 90% <br />左下</p></div> <div class="radial-various-1"><p>いろいろ 1</p></div> <div class="radial-various-2"><p>いろいろ 2</p></div> </セクション> <section class="color-stops"> <div class="color-stops-1"><p>黄色 10%、緑色</p></div> <div class="color-stops-2"><p>右上、黄色、<br>緑 70%、<br>青</p></div> </セクション> </body> </html>
体 {
padding: 1.25em; /* 20px/16px なので、両側に 20px */
フォントサイズ: 100%;
}
ディビジョン {
フロート: 左;
高さ: 150ピクセル;
マージン: 10px;
幅: 150ピクセル;
}
p {
色: #fff;
フォント: 太字 1.25em/1 サンセリフ /* 20px/16px */
パディングトップ: 1.65em; /* 33px/16px */
テキスト整列: 中央;
}
/* 注: 以下のグラデーションは、標準の CSS3 構文でのものです。これらをサポートするブラウザは、Chrome 26 以降、Firefox 16 以降、IE 10 以降、および Opera 12.10 以降です。同じについては、gradients-with-browser-prefixes.css を参照してください。グラデーション効果ですが、ベンダー プレフィックス コードも含まれているため、いくつかの古いブラウザでもグラデーションが機能します。「フォールバック」コメントが付いた背景がブラウザに表示される色です。グラデーション構文をサポートしていない背景画像をフォールバックとして使用することもできます (単独で、または色と組み合わせて)。たとえば、background: red url(gradient-image.jpg) no-repeat; となります。 .*/
/* 線形グラデーション
------------------------------------------ */
/* ：：：： 垂直 ：：：： */
.vertical-down {
背景: シルバー; /* フォールバック */
/* デフォルトのグラデーションなので、色の前に「下まで」を指定する必要はありません */
背景: 線形グラデーション(シルバー、ブラック);
}
.vertical-up {
背景:シルバー;
背景: 線形グラデーション(上へ、銀色、黒);
}
/* :::: 水平方向 :::: */
.horizontal-rt {
背景: シルバー; /* フォールバック */
背景: 線形グラデーション(右へ、銀色、黒);
}
.horizontal-lt {
背景: シルバー; /* フォールバック */
背景: 線形グラデーション(左へ、銀色、黒);
}
/* :::: 対角線の角度 :::: */
/* 注: 377 ページの図では代替色としてアクアが示されていますが、私はそれを切り替えました。
ネイビーの背景では白い文字が読みやすくなるため、以下はネイビーに変更します。
.angle-bot-rt {
背景: ネイビー /* フォールバック */
背景: 線形グラデーション(右下へ、水色、ネイビー);
}
.angle-bot-lt {
背景: ネイビー /* フォールバック */
背景: 線形グラデーション(左下へ、水色、ネイビー);
}
.angle-top-rt {
背景: ネイビー /* フォールバック */
背景: 線形グラデーション(右上へ、水色、ネイビー);
}
.angle-top-lt {
背景: ネイビー /* フォールバック */
背景: 線形グラデーション(左上へ、水色、ネイビー);
}
/* :::: 度による角度 :::: */
.angle-120deg {
背景: ネイビー /* フォールバック */
背景: 線形グラデーション(120度、水色、ネイビー);
}
.angle-290deg {
背景: ネイビー /* フォールバック */
背景: 線形グラデーション(290度、水色、ネイビー);
}
/* 放射状グラデーション
------------------------------------------ */
/* :::: ラジアル :::: */
.radial p {
テキストシャドウ: 0 0 3px #000;
}
.radial-center {
背景: 赤 /* フォールバック */
背景：radial-gradient( yellow, red); /* デフォルト */
}
.radial-top {
背景: 赤 /* フォールバック */
背景: 放射状グラデーション(上部、黄色、赤);
}
.radial-size-1 {
背景: 赤 /* フォールバック */
背景: 放射状グラデーション(100px 50px、黄色、赤);
}
.radial-size-2 {
背景: 赤 /* フォールバック */
背景: 放射状グラデーション (左下 70% 90%、黄色、赤);
}
.radial-さまざま-1 {
背景: 赤 /* フォールバック */
背景: 放射状グラデーション(70px 60px で最も近い側、黄色、ライム、赤);
}
.radial-various-2 {
背景: 赤 /* フォールバック */
背景: 放射状グラデーション(65% 70% で 30px 30px、黄色、ライム、赤);
}
/* カラーストップのある線形グラデーション
------------------------------------------ */
.color-stops div {
マージン-ボトム: 30px;
}
.color-stops p {
パディングトップ: 25px;
テキストシャドウ: 0 0 3px #000;
}
.color-stops-2 p {
フォントサイズ: 18px;
行の高さ: 1.05;
}
.color-stops-1 {
背景: 緑 /* フォールバック */
背景: 線形グラデーション(黄色 10%、緑色);
}
.color-stops-2 {
背景: 緑 /* フォールバック */
背景: 線形グラデーション(右上へ、黄色、緑 70%、青);
}background: colorまたはbackground-color: colorを入力します。 colorには、16 進数、RGB 値、またはその他のサポートされている色の名前を使用することもできます。 IE8 以前のバージョンは RGBA、HSL、または HSLA 値をサポートしていないため、代替背景色として RGBA、HSL、または HSLA 値を使用しないことをお勧めします (IE をサポートする予定がない場合でも心配する必要はありません)。
background: linear-gradient(と入力します。グラデーションの方向を上から下 (デフォルトの方向) にしたい場合は、この手順をスキップできます。入力方向の後にカンマを追加すると、方向はto top 、 to rightを参照します。 、 to bottom right 、 to top rightなど。または、入力方向の後にカンマを追加します。方向は角度の値を指します（ 45deg 、 107degなど) で後述する「指定色」に従ってグラデーションの色を定義し);グラデーションを完成させます。background: radial-gradient( 」と入力します。グラデーションの形状を指定します。サイズを指定する場合は、手順3で指定したサイズに基づいて自分で決定できます。それ以外の場合は、 circleまたはellipseを入力します。グラデーションのサイズを指定しますサイズを自動的に指定された値 (デフォルト値は「farthest-corner」、最も遠い隅) にする場合は、グラデーションの幅と高さを表す長さの値 ( 200pxや7emなど) またはそのペアを入力します。幅と高さを表す値の( 390px 175pxまたは60% 85% ) 値を 1 つだけ使用する場合、値をパーセンテージにしたり、 closest-side 、 farthest-side 、 closest-corner 、またはfarthest-cornerを入力したりすることはできないことに注意してください。これらのキーワードは、グラデーションが中心からどこまで伸びるかを表します。グラデーションを要素の中心at top開始する場合はat rightこの手順を省略できます。 at bottom left 、 atでat top right 、 at 200px 43px 、 at 30% 40%グラデーションの中心位置を表す座標のペアを入力します。 at 30% 40% 、 at 50% -10pxグラデーションの色を定義します);グラデーションを完成させます。要素の透明度を変更するには、 opacity属性を使用します。この方法では、 opacity: xと入力します。ここで、 x要素の不透明度 (小数点以下 2 桁、単位なし) を表します。
opacityのデフォルト値は 1 (完全に不透明) で、範囲は0~1です。
opacity属性と:hover擬似属性を使用すると、興味深い実用的な効果を生み出すことができます。たとえば、 img { opacity: .75; }デフォルトで画像の不透明度を 75% に設定し、 img:hover { opacity: 1; }ユーザーがマウスをポイントしたときに要素を不透明にすることができます。この効果は、サムネイルをフルサイズのバージョンにリンクするときによく見られます。訪問者にとって、浮遊は画像の動きを強化します。
opacity属性と、RGBA または HSLA を使用して設定された透明な背景色は、混同されやすい 2 つの概念です。 opacity要素全体 (そのコンテンツを含む) に影響しますが、 background-color: rgba(128,0,64,.6);のような設定は背景の透明度にのみ影響します。
:beforeおよび:after擬似要素の使用は、ページに素晴らしいデザイン効果を追加する優れた方法です。これらをcontent属性と組み合わせて、いわゆる生成コンテンツを作成できます。生成されたコンテンツとは、HTML ではなく CSS を通じて作成されたコンテンツを指します。
... <p>このエリアは、ヴィラの中でも最も静かな空間の 1 つです。プラタナスや月桂樹の木陰を楽しみながら、2 つの彫刻の噴水からの水しぶきに耳を傾けながら歩き回っていると、… と思わずにはいられませんでした。 href="victoria.html" class="more">続きを読む</a></p> ...
/* 生成されたコンテンツ */
.more:後 {
コンテンツ： " "";
}上記のコードにより、 class="more"を持つ要素の後に二重矢印を表示できます。将来変更する必要がある場合は、多数の HTML ページを変更せずに.moreクラスを変更するだけで済みます。
テキストはブラウザにすぐに表示されますが、画像はページの読み込みに時間がかかる傾向があります。この問題を解決するには、複数の画像を 1 つの背景画像 ( sprite ) に結合し、 background-position属性を使用して CSS を通じて画像のどの部分を表示するかを制御できます。
.documents li {
マージントップ: .45em;
}
/* HTML 内の各リンクにはこのクラスがあります */
.icon {
表示: インラインブロック;
行の高さ: 1.1;
フォントサイズ: .875em;
min-height: 16px; /* アイコンの高さが切り取られないように設定します */
パディング左: 23px;
パディングトップ: 2px;
/* HTML 内の class="icon" を持つ要素に対して絶対相対的にアイコンを配置できます */
位置: 相対的;
}
.icon:前 {
背景画像: url(../img/sprite.png);
コンテンツ： " ";
表示: ブロック;
高さ: 16px; /* アイコンの高さ */
left: 0; /* アイコンを別の場所に表示したい場合は、これを変更します */
位置: 絶対;
width: 16px; /* アイコンの幅 */
top: 0; /* アイコンを別の場所に表示したい場合は、これを変更します */
}
/* .xls で終わるドキュメント ファイル名のスプライト画像の位置を移動します */
a[href$=".xls"]:前 {
背景位置: -17px 0;
}
/* .docx で終わるドキュメント ファイル名のスプライト画像の位置を移動します */
a[href$=".docx"]:before {
背景位置: -34px 0;
} sprite任意の数の要素に適用できます。上記の例では、 .icon:beforeを使用して目的の効果を実現します。このように、 sprite content: " ";によって生成される空間の背景画像です。これをdisplay: block;に設定すると、アイコンのサイズに合わせて高さと幅を設定できます。これら 3 つのプロパティがないと、画像は表示されません。 background-position使用すると、その位置に正しいアイコンを配置できます。
CSS3 を使用したスタイル効果の強化に関するこの記事はこれで終わりです。CSS3 スタイル効果の強化について詳しくは、downcodes.com で以前の記事を検索するか、今後も downcodes をサポートしていただければ幸いです。