卡卡網(wǎng)

CSS box-shadow 屬性用于在元素的框架上添加陰影效果。你可以在同一個(gè)元素上設(shè)置多個(gè)陰影效果，并用逗號(hào)將它們分隔開。該屬性可設(shè)置的值包括陰影的 X 軸偏移量、Y 軸偏移量、模糊半徑、擴(kuò)散半徑和顏色。

我們先看看下面的 box-shadow 各種值的陰影效果。

你幾乎可以在任何元素上使用box-shadow來(lái)添加陰影效果。如果元素同時(shí)設(shè)置了 border-radius屬性，那么陰影也會(huì)有圓角效果。

語(yǔ)法

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

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

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

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

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

/* 全局關(guān)鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

向元素添加單個(gè) box-shadow 效果時(shí)使用以下規(guī)則：

1、當(dāng)給出兩個(gè)、三個(gè)或四個(gè) <length>值時(shí)。

• 如果只給出兩個(gè)值，那么這兩個(gè)值將會(huì)被當(dāng)作 <offset-x><offset-y> 來(lái)解釋。
• 如果給出了第三個(gè)值，那么第三個(gè)值將會(huì)被當(dāng)作<blur-radius>解釋。
• 如果給出了第四個(gè)值，那么第四個(gè)值將會(huì)被當(dāng)作<spread-radius>來(lái)解釋。

2、可選，inset關(guān)鍵字。

3、可選，<color>值。

若要對(duì)同一個(gè)元素添加多個(gè)陰影效果，請(qǐng)使用逗號(hào)將每個(gè)陰影規(guī)則分隔開。 

取值

inset

如果沒有指定inset，默認(rèn)陰影在邊框外，即陰影向外擴(kuò)散。 使用 inset 關(guān)鍵字會(huì)使得陰影落在盒子內(nèi)部，這樣看起來(lái)就像是內(nèi)容被壓低了。此時(shí)陰影會(huì)在邊框之內(nèi) (即使是透明邊框）、背景之上、內(nèi)容之下。

<offset-x> <offset-y>

這是頭兩個(gè) <length> 值，用來(lái)設(shè)置陰影偏移量。x,y 是按照數(shù)學(xué)二維坐標(biāo)系來(lái)計(jì)算的，只不過 y 垂直方向向下。 <offset-x> 設(shè)置水平偏移量，正值陰影則位于元素右邊，負(fù)值陰影則位于元素左邊。 <offset-y> 設(shè)置垂直偏移量，正值陰影則位于元素下方，負(fù)值陰影則位于元素上方?？捎脝挝徽?qǐng)查看 <length> 。 如果兩者都是 0，那么陰影位于元素后面。這時(shí)如果設(shè)置了<blur-radius> 或<spread-radius> 則有模糊效果，需要考慮 inset。

<blur-radius>

這是第三個(gè) <length> 值。值越大，模糊面積越大，陰影就越大越淡。不能為負(fù)值。默認(rèn)為 0，此時(shí)陰影邊緣銳利。本規(guī)范不包括如何計(jì)算模糊半徑的精確算法，但是，它詳細(xì)說明如下：

對(duì)于長(zhǎng)而直的陰影邊緣，它會(huì)創(chuàng)建一個(gè)過渡顏色用于模糊以陰影邊緣為中心、模糊半徑為半徑的局域，過渡顏色的范圍在完整的陰影顏色到它最外面的終點(diǎn)的透明之間。

<spread-radius>

這是第四個(gè) <length> 值。取正值時(shí)，陰影擴(kuò)大；取負(fù)值時(shí)，陰影收縮。默認(rèn)為 0，此時(shí)陰影與元素同樣大，需要考慮 inset。

<color>

相關(guān)事項(xiàng)查看 <color> 。如果沒有指定，則由瀏覽器決定——通常是color的值，不過目前 Safari 取透明。

合成

將 none 看做是長(zhǎng)度為 0 的列表。

列表中的每個(gè)陰影通過color組件（作為顏色），以及 x，y，blur，（合適的時(shí)候）加上 spread 組件（作為長(zhǎng)度）進(jìn)行合成。對(duì)于每個(gè)陰影，如果兩個(gè)輸入的陰影都是 inset 或者都不是 inset，那么要添加的陰影必須考慮已存在的陰影。如果任何一對(duì)輸入陰影中，一個(gè)是 inset，另一個(gè)不是 inset，那么整個(gè)陰影列表就是不可合成的。如果陰影列表有不同的長(zhǎng)度，那么較短的列表會(huì)在尾部補(bǔ)上這類陰影：顏色透明，所有長(zhǎng)度為 0，inset 還是非 inset 同較長(zhǎng)的列表。

正規(guī)文法

box-shadow = 
  <spread-shadow>#  

<spread-shadow> = 
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?           

例子

設(shè)置三種陰影

第一個(gè)例子中，包括了三種 shadow，內(nèi)置的陰影，常規(guī)的下沉陰影，和一個(gè) 2 個(gè)像素寬度的 border 式的陰影 (可以用 outline 來(lái)替代第三種)。

HTML

<blockquote>
  <q
    >You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.</q
  >
  <p>— Maya Angelou</p>
</blockquote>

CSS

blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

效果

設(shè)置偏移量和 blur 為零

HTML

<div><p>Hello World</p></div>

CSS

p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}

效果

當(dāng) x-offset、y-offset 和 blur 都是 0，盒陰影將是一個(gè)四邊都是一樣長(zhǎng)度的帶有顏色的outline。當(dāng)設(shè)置了多個(gè)陰影時(shí)，陰影繪制由最后一個(gè)開始，故第一個(gè)設(shè)置的陰影將覆蓋在后設(shè)置的陰影之上。當(dāng) border-radius 設(shè)置為 0 時(shí)（也是其默認(rèn)值），陰影的四角將沒有弧度。當(dāng)我們?cè)O(shè)置了 border-radius 為其他不為 0 的值時(shí)，陰影的四角也隨之形成弧度。

我們通常在元素上增加一個(gè)大小為最大陰影寬度的margin值以保證陰影不會(huì)覆蓋到相鄰的元素或者覆蓋到元素的border上。box-shadow屬性不會(huì)影響到盒模型的構(gòu)成。 

瀏覽器兼容性

總結(jié)

本文詳細(xì)介紹了box-shadow的語(yǔ)法、參數(shù)、用法， 希望對(duì)你有所幫助。

相關(guān)文章

• 示例分解 CSS box-shadow 與 drop-shadow 的不同
• 使用box-shadow實(shí)現(xiàn)的7個(gè)按鈕懸停效果
• 8款非常漂亮的CSS 3D外觀框陰影

標(biāo)簽: box-shadow