【翻訳】CSS Boxを深く理解する Shadow_html/css_WEB-ITnose

原文: CSS Box Shadow の詳細

CSS box-shadow は、ブロックレベルの要素に外側のシャドウまたは内側のシャドウを与えるために使用できます。次に、このCSSの特徴を詳しく見ていきましょう。

例

ここでは、div で CSS box-shadow プロパティを使用する 3 つの例を示します。

例 1: シンプルな外側の影

以下は、字幕に影を追加するスタイルです。

box-shadow:0 0 10px gray;

例 2: インナー シャドウ

inset 属性値を使用してインナー シャドウをレンダリングできます。

box-shadow:inset 0 0 10px;

例 3: 外側の影をオフセットする

この例では、水平方向と垂直方向に 5 ピクセル右にオフセットすることで影を右下にオフセットします

box-shadow:5px 5px 10px;

左上に必要な影を追加します。オフセット？これを行うには、以下の例のように、水平および垂直オフセットを -5px に設定します。

box-shadow:-5px -5px 10px;

box-shadow の動作を確認したので、詳しく見てみましょう。

構文

box-shadow の一般的な構文は次のとおりです:

box-shadow:[inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color]

CSS プロパティ値

CSS box-shadow には 6 つのプロパティ値があります:

inset

horizo​​ntal offset

垂直オフセット

ぼかし半径

拡散距離

カラー

必要なプロパティは、水平オフセットと垂直オフセットの 2 つだけです。

4 つの属性値、水平オフセット、垂直オフセット、ぼかし半径、延長距離は、CSS の長さ単位 (px、em、% など) を使用する必要があります。

この色の値は、16 進数などの色の単位である必要があります。値 (例: #000000)。

属性と値の概要表

属性	必須ですか	単位	デフォルト値
インセット	不要	キーワード	未指定時の影 デフォルトは外側
水平オフセット	は	長さ	デフォルト値なし、指定する必要があります
垂直オフセット	は	長さ	デフォルト値なし、指定する必要があります
ブラー半径	いいえ	長さ	0
延長距離	ではない	長さ	0
Color	ではない	Color	ボックスの影属性の影響を受ける要素 カラー値は同じ

inset

如果inset关键词存在，盒阴影将会放在HTML元素的内部

box-shadow:inset 0 0 5px 5px olive;

作为对比，这里是一个没有inset属性的box-shadow样式。

box-shadow:0 0 5px 5px olive;

水平偏移

水平偏移控制了盒子阴影在x轴的偏移。正值会把盒子的阴影向右移动，负值的话会把它向左移动。

下面的例子中，我们把水平的偏移设置成20px，刚好是水平偏移量的两倍，所以阴影水平宽度刚好是垂直高度的两倍。

box-shadow:20px 10px;

垂直偏移

垂直偏移控制了盒阴影在y轴的偏移量。正值会把盒子的阴影向下移动，负值刚好相反会把盒子网上移动。

下面的例子中，垂直的偏移设置成-20px，刚好是水平偏移的两倍。同时，因为是负值，所以向上移动。

box-shadow:10px -20px;

模糊半径

这个模糊半径会影响到阴影的模糊和锐利程度。

模糊半径是可选的，如果你不指定它，默认值是0.另外，你不能指定它为负值，这个和水平偏移和垂直偏移不一样。

如果模糊半径是0，盒子阴影会很锐利并且它的颜色是很实的。随着你不断的增大这个值，它会变得越来越模糊和透明。

下面的例子，模糊半径被设置成20px，因此模糊度是相当突出。

box-shadow:5px 5px 20px;

扩展距离

这个扩展距离会让盒子的阴影在各个方向上都会变大或变小。如果它有一个正值，盒子阴影会在各个方向上增加大小。如果是负值，则会在各个方向上收缩。

值得注意的是，因为它的扩展距离是正5，所以会在各个方向上增加10px因为没有水平和垂直偏移。

box-shadow:0 0 10px 5px;

当扩展距离是负的时候，阴影就会在各个方向上收缩。下面的例子展示当阴影的宽度比盒子小的时候的情况

box-shadow:0 10px 10px -5px;

　颜色

通过名字你就可以判断出来，颜色值会设置盒阴影的颜色。它可以通过任何可以表示颜色的方式来表示颜色。是否设置颜色值是可选的。

换句话说，默认情况下当你没有指明颜色值，阴影颜色会等于这个盒子对应的html元素的颜色值。比如有一个div的颜色被设置成红色，这个盒子阴影的颜色也会变成红色：

color:red;box-shadow:0 0 10px 5px;

如果你想要设置阴影的颜色和div的颜色不一样，可以通过下面的方式，你会发现尽管你的文字颜色是红色，盒子阴影颜色依然可以是蓝色。

color:red;box-shadow:0 0 10px 5px blue;

多阴影效果

这个就是能够让我们变得有创造力的CSS属性。你能够在一个盒子上设置多个阴影。

语法就像下面这样。

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

换句话说，你可以通过在每个属性设置组后面添加逗号(,)来实现多阴影。

下面的例子展示了两个阴影的情况，左上方红色的阴影，右下方蓝色的阴影。

box-shadow: -5px -5px 30px 5px red,         5px 5px 30px 5px blue;

浏览器支持

这个CSS的box-shadow属性有着很好地浏览器支持。使用这个属性在拖后腿的IE浏览器也能在IE9以后得到支持啦。

查看演示