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

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

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

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

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

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