CSS の -webkit-box-shadow と box-shadow の違い

ご存知のとおり、CSS は、開発者が要素に必要なスタイルを追加できるようにする幅広いプロパティと疑似クラスを提供します。これらのプロパティの 1 つは BoxShadow プロパティ で、要素の周囲に影のような効果を追加できます。

Box-shadow プロパティ

Box Shadow は、要素に外側または内側のシャドウ効果を作成するために使用される CSS プロパティです。 1 つ以上のシャドウを要素に適用します。各シャドウは、要素からの X および Y オフセット、ぼかし半径、拡散半径、色、および不透明度の値によって指定されます。

box-shadow プロパティは、カンマで区切られた複数の値を受け入れることができ、各値は影の効果を定義します。オフセットのないボックス シャドウは、紙に印刷したときと同じように、平らな形状のように見えます。

box-shadow を適用したい要素が何らかの形式の borderradius を指定していると仮定すると、box-shadow の効果にはその要素のような曲線の境界線も含まれます。複数のボックス シャドウは、複数のテキスト シャドウと同じ順序で Z 軸上に並べられます。

- を使用して要素のボックス シャドウを指定できます -

• 2 つの値 - 2 つの値を持つ box-shadow プロパティを使用するときは常に、それらは X および Y オフセットの値として使用されます。

• 3 つの値 - 最初の 2 つの値は X および Y オフセット値として機能し、3 番目の値はぼかし半径効果に使用されます。

• 4 つの値 - 4 番目の値は拡散半径の値とみなされ、残りの値は X オフセット、Y オフセット、ブラー半径の値となります。それぞれ。

• インセット - これはオプションの値であり、これが存在するとフレームの影が片側に偏ります。これを指定しないと、ドロップ シャドウのように影が上に盛り上がったように見えます。

• Color

  - これは影の色を設定する別のオプションの値です。指定しない場合、色はデフォルトで要素の現在の色になります。

初期値は none で、すべての要素に適用されます。シャドウリストのアニメーションタイプはアニメーションに使用できますが、継承することはできません。

＃＃＃例＃＃＃

CSS での box-shadow プロパティの使用例を以下に示します。

リーリー

ボックスの Shadow プロパティを理解したところで、CSS の「Webkit」とは何か、そしてなぜそれが必要なのかを見ていきます。 Webkit box Shadow については後で説明します。

ウェブキットとは何ですか?

Webkit

は、ほぼすべての macOS アプリケーションで使用される

Apple の Web ブラウザ エンジン

です。他にも、Firefox 用の Gecko、edge 用の Blink など、多くの Web ブラウザ エンジンがあります。そこで、なぜそれらが必要なのかという疑問が生じます。 CSS セレクターの -webkit プレフィックスは、-moz プロパティと同様に、そのエンジンによってのみ処理されるプロパティを示します。これを指定することで、基本的に、特定のブラウザ エンジンを使用する場合にのみそれを使用し、それ以外の場合はそのままにしておくようにブラウザに指示します。使いにくいため、多くの開発者ができるだけ早く廃止することを望んでいます。 CSS の Webkit-box-shadow プロパティ

box-shadow プロパティと同様に、

webkit-box-shadow プロパティ

も、適用される要素のフレームに影のような効果を追加します。ただし、その実装は Chrome や Apple Safari などのブラウザに固有であることに注意することが重要です。

この属性に割り当てられる値は - です。

X-offset

- 要素までの水平オフセットまたは距離を指定します。

• Y オフセット
- これもオフセットまたは距離を指定しますが、垂直方向です。

• Blur
- これは長さの値です。これが大きい場合、作成されるブラー効果も大きくなり、シャドウ効果も大きくなります。逆も同様です。

• ＃＃＃例＃＃＃ CSS での web kit-box-shadow の使用例を以下に示します。

  リーリー
box-shadow と webkit-box-shadow の違い

これら 2 つのプロパティを理解したところで、それらの違いをリストしてみましょう。

box-shadow プロパティは普遍的に実装されていますが、「webkitbox-shadow」は特定の Web ブラウザ エンジン (Safari や Google Chrome など) を使用するブラウザでのみ機能します。

box Shadow プロパティを使用すると、最近のすべてのバージョンでシャドウ効果のスタイルを設定できますが、古いバージョンのブラウザで作業する必要がある場合は、webkit-box-shadow を使用する必要があります。

• ＃＃＃結論は＃＃＃
要約すると、CSS における -webkit-box-shadow と box-shadow の主な違いは、-webkit-box-shadow が Webkit ブラウザによって導入された box-shadow プロパティのベンダー プレフィックスであるということです。 box-shadow プロパティを使用すると、画像やその他の外部リソースを使用せずに要素にドロップ シャドウ効果を適用できます。 -webkit-box-shadow 属性は非推奨となり、標準の box-shadow 構文に置き換えられました。最新のブラウザのほとんどがそれをサポートしているためです。要約すると、両方のプロパティは要素に影を作成するために使用されますが、もう一方は時間の経過とともに非推奨になるため、一方のみを使用する必要があります。

以上がCSS の -webkit-box-shadow と box-shadow の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。