css3 box-shadow シャドウ グラフィック チュートリアル

この記事では、主に CSS3 のボックス シャドウ シャドウ (外側のシャドウと外側のグロー) を紹介します。写真は、さまざまな位置でのシャドウのさまざまな効果を示しています。必要な方は参考にしてください。

基本的な手順:

外側の影: box-shadow: サイズ) 影の色

内側の影: box-shadow: (p、p、h1、h2、h3、h4、h5、h6 など) は使用されませんテキストシャドウを設定したい場合は、ナレッジポイントを参照してください: text-shadow (同じ理由)

新しい属性であるため、互換性のために、主要なブラウザはこれらのメジャーの下位バージョンもサポートしています。主流のブラウザで box-shadow 属性を使用する場合、属性の名前を

として記述する必要があります。 基本的な練習:

-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式，欧朋浏览器  -o-box-shadow   IE>9  -ms-box-shadow   

パフォーマンスを向上させるために box-shadow の特性を理解し、いくつかの小さな作業を実行します。テスト: (スタイルをタグ内で直接ネストするため) テスト 1:

: 0 0 10px #f00 (設定値が半径範囲と色に影響を与える X 軸と Y 軸は移動されないため)

テスト 2: < ;p style="box-シャドウ:4px 4px 10px #f00; border:1px ソリッドグリーン>

box-shadow:4px 4px 10px #f00; テスト 1 と異なり、X 軸と Y 軸が正の値に変化しました (正値は右と下を指します) ので、次のようになります‍

テスト 3:

< ;/ p> box-shadow:-4px -4px 10px #f00;テスト2との違いは、X軸とY軸が負の値に変更されている(負の値は左上に行く)ので、このように‍

同様に、次の正の値と次の負の値の影響をテストできますが、ここではテストしません。 。 。 。 。 。 。 。

テスト 4:

0px -10px 10px #000、/*上の影*/ 10px 0px 10px 緑、/*右影*/ x 0px 10px 10px blue; X 軸と Y 軸の位置、色の値、影の値のサイズを変更するだけです (カンマで区切ります)。あと数回練習してください

。 --Inner Shadow

box-shadow: 0px 0px 10px red inset; 唯一の違いは、他のプロパティは外側のシャドウと同じです


同じ原理を逸脱することなく変更できます。一度理解すると、原理がわかります。 CSS3のアニメーション効果を利用して、自由に書き換えることができるFlashレイヤー（ワード）を簡単に実装できます。 。お役に立てば幸いです。 。

以上がcss3 box-shadow シャドウ グラフィック チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。