CSSでインナーシャドウを作成する方法

CSS3 box-shadow 属性は、要素の 1 つ以上の影の効果を記述するために使用されます。この属性を使用すると、希望するほぼすべての影の効果を実現できます。ただし、box-shadow 属性の構文と値は非常に柔軟なので、初心者にとっては理解するのが少し難しいです。

シミュレートされたアドレス: https://www.html.cn/tool/css3Preview/Box-Shadow.html

CSSコード:

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
 
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
 
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
 
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
 
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

値の説明:

inset: デフォルトのシャドウは境界線の外側にあります。インセットを使用すると、影は境界線 (透明な境界線でも) 内、背景の上、コンテンツの下に表示されます。この値を最後に置くことを好む人もいますし、ブラウザもそれをサポートしています。

8b89863bbb9a724179580669ccdd6d16 d1d21daad911d430a139ccdb7ee6c1d6: これらは最初の 2 つの d82af2074b26fcfe177e947839b5d381 値で、シャドウ オフセットの設定に使用されます。 8b89863bbb9a724179580669ccdd6d16 は水平オフセットを設定します。負の値の場合、影は要素の左側に表示されます。 d1d21daad911d430a139ccdb7ee6c1d6 は垂直オフセットを設定します。負の場合、影は要素の上にあります。使用可能な単位については、d82af2074b26fcfe177e947839b5d381 を参照してください。両方が 0 の場合、影は要素の後ろにあります。このとき、 または を設定すると、ぼかし効果がかかります。

747111f72d266ea1b5d91cda9f8aa39e: これは 3 番目の d82af2074b26fcfe177e947839b5d381 値です。値が大きいほど、ぼかし領域が大きくなり、影が大きく明るくなります。負の値は指定できません。デフォルトは 0 で、この場合、影のエッジはシャープになります。

5e387985f926f4cd5497444dde74a02d : これは 4 番目の d82af2074b26fcfe177e947839b5d381 値です。正の値を取ると影は拡大し、負の値を取ると影は縮小します。デフォルトは 0 で、この場合、影は要素と同じ大きさになります。

b10fb37415d019cfffa8c4d7366c607f : 関連事項については、b10fb37415d019cfffa8c4d7366c607f を参照してください。指定しない場合、ブラウザによって決定されます。通常は色の値ですが、Safari では現在透明を使用します。

以上がCSSでインナーシャドウを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。