扒开女人双腿猛进猛出免费视频,久一在线视频

技術頻道 - html技術

box-shadow最詳細介紹：語法、參數、示例

作者:admin 時間:2024-4-18 14:59:49 瀏覽:

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

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

box-shadow 各種值的陰影效果

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

語法

/* 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;

/* 全局關鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

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

1、當給出兩個、三個或四個 <length>值時。

如果只給出兩個值，那么這兩個值將會被當作 <offset-x><offset-y> 來解釋。
如果給出了第三個值，那么第三個值將會被當作<blur-radius>解釋。
如果給出了第四個值，那么第四個值將會被當作<spread-radius>來解釋。

2、可選，inset關鍵字。

3、可選，<color>值。

若要對同一個元素添加多個陰影效果，請使用逗號將每個陰影規(guī)則分隔開。

取值

inset

如果沒有指定inset，默認陰影在邊框外，即陰影向外擴散。使用 inset 關鍵字會使得陰影落在盒子內部，這樣看起來就像是內容被壓低了。此時陰影會在邊框之內 (即使是透明邊框）、背景之上、內容之下。

<offset-x> <offset-y>

這是頭兩個 <length> 值，用來設置陰影偏移量。x,y 是按照數學二維坐標系來計算的，只不過 y 垂直方向向下。 <offset-x> 設置水平偏移量，正值陰影則位于元素右邊，負值陰影則位于元素左邊。 <offset-y> 設置垂直偏移量，正值陰影則位于元素下方，負值陰影則位于元素上方?？捎脝挝徽埐榭?<length> 。如果兩者都是 0，那么陰影位于元素后面。這時如果設置了<blur-radius> 或<spread-radius> 則有模糊效果，需要考慮 inset。

<blur-radius>

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

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

<spread-radius>

這是第四個 <length> 值。取正值時，陰影擴大；取負值時，陰影收縮。默認為 0，此時陰影與元素同樣大，需要考慮 inset。

<color>

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

合成

將 none 看做是長度為 0 的列表。

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

正規(guī)文法

box-shadow = 
  <spread-shadow>#  

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

例子

設置三種陰影

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

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);
}

效果

設置偏移量和 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;
}

效果

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

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

瀏覽器兼容性