ホームページ > 記事 > ウェブフロントエンド > CSS3の新機能の詳細な分析

CSS3の新機能の詳細な分析

Y2Jオリジナル: 2017-05-20 11:50:521672ブラウズ

注: CSS3 には多くの新機能があるため、2 つのブログ投稿で説明します。最初の記事には主に、新しいセレクター、テキストとブロックの影、複数の背景画像、カラーグラデーション、角丸などが含まれています。 2 番目の記事では、回転、移動、拡大縮小など、CSS3 のさまざまなアニメーション効果を主に詳しく説明しており、アイコンフォントの適用も含まれています。

CSS3属性セレクター:

a[href$='.pdf']は、.pdfで終わるhref属性が選択されていることを意味します

a[href^=' mailto ']はmailtoで始まるhref属性が選択されていることを意味します

a[href*='item']はitemを含むhref属性が選択されていることを意味します

ここで、aは要素タグを指すだけです

3つありますp、それらの属性名の値は異なります:

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

セレクターの追加:

効果:

別の属性セレクターの追加:

効果:

セレクターの使用法については皆さんもすでによくご存じだと思いますが、比較的簡単なのでここでは詳しく説明しません。この種の属性セレクターは、主に href 属性で使用され、.jpg .png .gif などのファイル名のさまざまな接尾辞をロードすることで、対応する選択を行います。

CSS3疑似クラスセレクター:

次のようなテーブルがあります:

疑似クラスセレクターを追加:

:nth-of-type パラメーターを使用してテーブルの奇数行または偶数行を選択できます。odd は奇数行を表し、even は偶数行を表します。

効果:

: nth-child疑似クラス。行の選択にも使用されます。パラメータがnの場合は、すべての行が選択されます。パラメータがn+iの場合は、i行目から始まるすべての行が選択されることを意味します。 2、つまり偶数行が選択されます。 3nは、3の倍数の行が選択されることを意味します。効果:

n+i:

2n:

3n -child

基本的には同じですが、すべてのルールが下から上に数えられるだけで、これはテーブルをひっくり返すのと同じです。ここでこれ以上言う必要はありません。興味のある読者は自分で試してみてください。

複数の背景画像:

CSS3 backgroud-imageは複数の背景画像を設定でき、各背景画像の位置も設定できます。

各背景画像には 4 つのパラメータがあります。 1. urlアドレス 2. 上

中央下

を含む上下の位置、パーセンテージも使用可能 3. を含む左右の位置左中央右、パーセント4. no-repeat、repeat-y、repeat-xなどの繰り返しメソッドも使用できます。わかりやすいのは、タイルなし、縦タイル、横タイルです。

(怠惰なのでここではスクリーンショットを撮っていません。読者はお気に入りの写真を試してみてください)

--------------------- --- --------------------------------------------------- --- --私が境界線です --------------------------------------------------- ---------- ------------

ここからはコアが異なるブラウザなので注意が必要です。 CSS3 のサポートレベルが異なるため、後続のすべてのプロパティには接頭辞が付けられます。

以下の例では、ブロガーはプレフィックスを追加しないか、時間を節約するために -webkit- プレフィックスのみを追加しました。具体的な記述は次のとおりです:

-webkit-

: webkitコアブラウザ、これはGoogleの

Chrome

ブラウザです。 - ：ヤモリ

コアブラウザ;

-o-: Opera

ブラウザ;

-ms-

: Microsoftの

IEブラウザ。

単純なスタイルは 5 回記述する必要がありますが、Web ページの互換性を確保するのはフロントエンドエンジニアの責任です。 2 番目のブログ記事のアニメーション機能も含め、実際に Web ページを作成する場合は、以下の各機能を例に従って記述する必要があります。

テキストシャドウ:

まずここにh1タグを書いてください、内容は私の先生が好んで使う文章です、文句を言わないでください...

書き込み:

テキストシャドウには 4 つのパラメータが含まれます: 1. 水平方向のオフセット 2. 垂直方向のオフセット 3. ぼかし半径 (値が大きいほどぼかし、その逆も同様でより鮮明になります) 4. 影の色効果:

より大きなオフセットを設定すると、浮遊した影のある効果を生み出すことができます: 光が降り注いでいるように見えますか?

複数の影をカンマで区切って設定します。ぼかしの半径が徐々に大きくなり、グロー効果が作成されます。

ライトボックス感覚

オフセット方向の異なる複数の影を設定し、適切な色を設定してレリーフ効果を作成します。

ブロックレベルのシャドウ:

ブロックのシャドウは多くのブロックレベルの要素に適用できます

さあ、一つ教えてくださいpプラスブロックシャドウ:

効果:

box-shadowには6つのパラメータがあります。 1. 投影方法 (オプション)、デフォルトの外側のシャドウを記述しないでください。inset は内側のシャドウ 2&3 を表します。テキストシャドウと同様に、オフセットを示します。 4. ぼかし半径 (オプション) 5. シャドウ拡張半径 (オプション) 選択)、値が大きいほど、影の範囲が大きくなります。 6. 影の色

インナーシャドウ効果:

赤い丸があります:

マルチレベルのブロックシャドウでは、拡張半径は徐々に増加します：

buns太陽が角を曲がっています。円を描くために。

適用対象:

効果:

border-radius

パラメータは1から4までです: 1 つのパラメーターは、値が 4 つの隅すべてに適用されることを意味します。2 パラメーターは、最初の値が左上と右下に使用され、2 番目の値が右上と左下に使用されることを意味します。最初の値が左上に使用され、2 番目の値が右上と左下に使用され、3 番目の値が右下に使用されることを意味します。

4 パラメーターは、4 つの値が使用されることを示します。左上、右上、右下、左下 (反時計回り)。一般的に、パラメーター 1 と 4 がよく使用され、その他は少し面倒です。