資訊專欄INFORMATION COLUMN
摘要：水平偏移水平偏移控制了盒子陰影在軸的偏移。同時，因為是負值，所以向上移動。如果是負值，則會在各個方向上收縮。值得注意的是，因為它的擴展距離是正，所以會在各個方向上增加因為沒有水平和垂直偏移。它可以通過任何可以表示顏色的方式來表示顏色。
原文：A Close Look at CSS Box Shadow
CSS的box-shadow可以被用來給塊級元素一個外陰影或者是內陰影。接下來讓我們仔細地看一下這個CSS的特性吧。
舉例下面有三個把CSS的box-shadow屬性使用在div里的例子。
例１：簡單的外陰影下面是是給副標題添加陰影的樣式。
box-shadow:0 0 10px gray;例2：內陰影
一個內陰影可以通過使用inset屬性值來渲染出來。
box-shadow:inset 0 0 10px;例3：偏移外陰影
這個例子中我們通過水平和垂直方向下和右偏移5px來實現陰影向右下方偏移
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
horizontal offset
vertical offset
blur radius
spread distance
color
只有兩個屬性是必須的：水平偏移和垂直偏移量。
四個屬性值，水平偏移，垂直偏移，模糊半徑，擴展距離，必須使用CSS長度單元（比如：px,em,%等）
這個顏色值必須是必須是一個顏色單元，比如十六進制值（如：#000000）。
屬性和值總結表| 屬性 | 是否必須 | 單位 | 默認值 |
|---|---|---|---|
| inset | 不是 | 關鍵詞 | 沒有指定的時候，陰影默認在外面 |
| 水平偏移 | 是 | 長度 | 沒有默認值，一定有指定 |
| 垂直偏移 | 是 | 長度 | 沒有默認值，一定要指定 |
| 模糊半徑 | 不是 | 長度 | 0 |
| 擴展距離 | 不是 | 長度 | 0 |
| 顏色 | 不是 | 顏色 | 和box shadow屬性作用的元素的color值一樣 |
如果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以后得到支持啦。
查看演示
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49638.html
摘要：水平偏移水平偏移控制了盒子陰影在軸的偏移。同時，因為是負值，所以向上移動。如果是負值，則會在各個方向上收縮。值得注意的是，因為它的擴展距離是正，所以會在各個方向上增加因為沒有水平和垂直偏移。它可以通過任何可以表示顏色的方式來表示顏色。 原文：A Close Look at CSS Box Shadow CSS的box-shadow可以被用來給塊級元素一個外陰影或者是內陰影。接下來讓我們...
摘要：系列文章說明原文下面的兼容性表將總結出表單對的支持程度，由于和表單的復雜性，這幾個表不能認為是最佳的參考對象。該屬性不能生效，或者表現很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。 系列文章說明 原文 下面的兼容性表將總結出HTML表單對CSS的支持程度，由于CSS和HTML表單的復雜性，這幾個表不能認為是最佳的參考對象。盡管如此，它們...
摘要：系列文章說明原文下面的兼容性表將總結出表單對的支持程度，由于和表單的復雜性，這幾個表不能認為是最佳的參考對象。該屬性不能生效，或者表現很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。 系列文章說明 原文 下面的兼容性表將總結出HTML表單對CSS的支持程度，由于CSS和HTML表單的復雜性，這幾個表不能認為是最佳的參考對象。盡管如此，它們...
摘要：希臘神話中有這樣一個故事是講述宙斯創造出來一個云女神涅斐勒，并且類似大多數的希臘神話一樣的，這個故事非常的奇異且限制級。我們能夠知道的是涅斐勒是由宙斯以他自己美麗的妻子的形象創造的。希臘神話中有這樣一個故事是講述宙斯創造出來一個云女神涅斐勒，并且類似大多數的希臘神話一樣的，這個故事非常的奇異且限制級。下面一個簡短克制的版本。我們能夠知道的是： 涅斐勒是由宙斯以他自己美麗的妻子的形象創造的。一...
摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
閱讀 2061·2021-11-23 09:51
閱讀 2203·2021-09-29 09:34
閱讀 3694·2021-09-22 15:50
閱讀 3556·2021-09-22 15:23
閱讀 2559·2019-08-30 15:55
閱讀 699·2019-08-30 15:53
閱讀 3066·2019-08-29 17:09
閱讀 2624·2019-08-29 13:57
