用於在元素的框架上新增陰影效果。

你可以在同一個元素上設定多個陰影效果，並用逗號將他們分隔開。

該屬性可設定的值包括陰影的X軸偏移量、Y軸偏移量、模糊半徑、擴散半徑和顏色。

一、屬性值規則

• 當給出兩個、三個或四個 <length> 值時。
  • 如果只給出兩個值, 那麼這兩個值將會被當作水平陰影、垂直陰影來解釋。
  • 如果給出了第三個值，那麼第三個值將會被當作模糊距離解釋。
  • 如果給出了第四個值, 那麼第四個值將會被當作陰影尺寸來解釋。
• 可選，inset關鍵字。
• 可選，顏色值。

二、取值

1、inset 內/外陰影

如果沒有指定 inset，預設陰影在邊框外，即陰影向外擴散。

使用 inset 關鍵字會使得陰影落在盒子內部，這樣看起來就像是內容被壓低了。此時陰影會在邊框之內 (即使是透明邊框）、背景之上、內容之下。

2、<offset-x> <offset-y>水平陰影/垂直陰影

這是頭兩個 <length> 值，用來設定陰影偏移量。

x，y 是按照數學二維座標系來計算的，只不過y垂直方向向下。

<offset-x> 設定水平偏移量，正值陰影則位於元素右邊，負值陰影則位於元素左邊。

<offset-y> 設定垂直偏移量，正值陰影則位於元素下方，負值陰影則位於元素上方。
如果兩者都是0，那麼陰影位於元素四周。這時如果設定了 <blur-radius> 或 <spread-radius> 則有模糊效果。需要考慮 inset。box-shadow: 0 0 10px red;

3、<blur-radius>模糊距離

這是第三個 <length> 值。

值越大，模糊面積越大，陰影就越大越淡。

不能為負值。預設為0，此時陰影邊緣銳利。

本規範不包括如何計算模糊半徑的精確演算法，但是，它詳細說明如下：
對於長而直的陰影邊緣，它會建立一個過渡顏色用於模糊 以陰影邊緣為中心、模糊半徑為半徑的局域，過渡顏色的範圍在完整的陰影顏色到它最外面的終點的透明之間。

4、<spread-radius>陰影的尺寸

這是第四個 <length> 值。

取正值時，陰影擴大；

取負值時，陰影收縮。

預設為0，此時陰影與元素同樣大。需要考慮 inset

5、<color>陰影的顏色

通常是color的值

demo:

/* x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset 5em 1em gold;

/* 任意數量的陰影，以逗號分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

div {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5);
    }

相關資料

• CSS系列之盒子陰影box-shadow（CSS3）

• CSS3 box-shadow 屬性

搜尋

複製