如何使用 CSS3 新增陰影

最新推荐文章于 2023-02-17 11:27:01 发布

hsany330

最新推荐文章于 2023-02-17 11:27:01 发布

阅读量1k

点赞数

本文介绍如何使用CSS3的box-shadow属性为网页元素添加阴影效果，包括基本阴影、光晕效果和内部阴影等，并探讨了在不同浏览器中的实现方法。

本主題說明如何使用 Windows Internet Explorer 9 與階層式樣式表層級 3 (CSS3)，在您的版面配置元素外部或內部新增陰影。您甚至還可以為 Internet Explorer 9 新增的圓角支援所建立的圓角添加陰影。本主題包含以下幾節：

方塊陰影選項與語法

陰影由 box-shadow 屬性啟用。Internet Explorer 9 中的陰影和圓角功能一樣強大；有數種選項可供指定。box-shadow 屬性中值的順序如下：

CSS

box-shadow: hoff voff bd sd color inset;

這裡的 hoff 表示水平位移、 voff 表示垂直位移、 bd 表示模糊距離、 sd 表示擴散距離、 color 表示陰影色彩，而 inset 則是關鍵字，使用時表示陰影是內部陰影而不是外部陰影。前兩個值是屬性的必要值，而且所有的值都必須以上述的順序指定。如果沒有指定色彩，Internet Explorer 9 會使用黑色做為陰影色彩。

以下是每個值的定義：

horizontal offset 這個長度值是必要的。這個值可以指定陰影向右 (正數) 或向左 (負數) 延伸的距離。請參閱下列圖表的視覺說明；hoff 表示水平位移，設為 20 像素。

vertical offset 這個長度值是必要的。這個值可以指定陰影向下 (正數) 或向上 (負數) 延伸的距離。請參閱下列圖表的視覺說明；voff 表示垂直位移，設為 20 像素。

blur distance 這個正長度值可指定陰影邊緣的模糊程度，也就是模糊起點與終點之間大約的長度。值愈高愈模糊。請參閱下列圖表的視覺說明；bd 表示模糊距離，設為 30 像素。

spread distance 這個長度值指定陰影向所有方向擴充 (正數) 或收縮 (負數) 的程度。這個值表示陰影從原始圖形朝外向所有方向延伸的距離。請參閱下列圖表的視覺說明；sd 表示擴散距離，設為 30 像素。原始的位移方塊圖形以虛線顯示，您可以較清楚地看見從原始位移方塊的邊框開始的擴張範圍。

color 這個 CSS 色彩值代表陰影的色彩。下方的影像說明與上方圖例的 box-shadow 屬性值相同，但結尾附加 "gray" 色彩。 (這個值如果換成 #808080 也可以指定相同的色彩；同時也支援十六進色彩值)。
Important 雖然全球資訊網協會 (W3C) 的 CSS3 背景與邊框規格並沒有規定必須使用色彩，但省略 box-shadow 屬性的色彩值 (或其對應的廠商特定變數) 可能無法在每個瀏覽器產生相同的結果。因此，建議您一律在 box-shadow 屬性中指定色彩值。

inset 使用這個關鍵字可以將外部陰影變更為內部陰影。下方影像說明與擴散距離圖例 (本節中的第二個圖例) 的 box-shadow 屬性值相同，但結尾附加 inset 關鍵字。

建立基本陰影

最簡單且最常見的陰影大概就是從方塊向外延伸幾個像素且帶點模糊的灰色陰影。我們將這個陰影套用到如何使用 CSS3 新增圓角主題中的咖啡公司範例。我們可以在標頭與頁尾新增些許陰影，令它們看起來更吸引人。

完成在如何使用 CSS3 新增圓角中的工作後，header 識別碼選取器的階層式樣式表 (CSS) 會像下面這樣：

CSS

#header {
    padding-top: 10px;
    background-color: #FFFFCC;
    border-top-left-radius: 50px 30px;
    border-top-right-radius: 50px 30px;
}

footer 識別碼選取器的 CSS 則是像這樣：

CSS

#footer {
    font-style: italic;
    color: #999999;
    padding: 10px;
    font-size: 10px;
    clear: both;
    background-color: #FFFFCC;
    border-bottom-left-radius: 15px 25px;
    border-bottom-right-radius: 15px 25px;
}

讓我們新增一個垂直和水平位移只有 5 像素的陰影，並加上 5 像素的輕微模糊效果但不使用擴張距離。同時將色彩指定為淺灰色。為此，我們在這兩個選取器加入下列行：

CSS

    box-shadow: 5px 5px 5px lightgray;

請記住，如果您沒有在 box-shadow 屬性指定第四個值，就是明確指定不要有擴張效果。因此，上一行跟下面這行相同：

CSS

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

在這兩個方塊上指定陰影後，標頭的右半部外觀如下：

頁尾的右半部外觀如下：

使用陰影建立光暈效果

只要將 box-shadow 屬性中的前兩個值設為零，就能在方塊套用光暈效果。

例如，看一下如何使用 CSS3 新增圓角主題中的咖啡公司產品縮圖範例。product_thumb 類別選取器的 CSS 如下：

CSS

.product_thumb {
    clear: left;
    height: 80px;
    width: 80px;
    margin-right: 10px;
    padding: 5px;
    float: left;
    border-width: 1px;
    border-color: #7f7f7f;
    border-style: dashed;
    border-radius: 5px;
}

我們在該方塊加入陰影，但位移維持為零。我們會加入輕微模糊效果以及些許擴張效果 (從原始方塊邊框向外延伸，使模糊效果看起來更明顯)，並配上深黃褐色以配合咖啡豆的色彩：

CSS

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

這會使縮圖的外觀成為下圖的樣子：

建立內部陰影

最後，我們要在資訊看板新增內部陰影。sidebar 識別碼選取器的 CSS 如下：

CSS

#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: dashed;
    border-color: #996600;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
}

同時變更邊框的色彩與樣式，以便與新的陰影更加協調。我們會將 border-style 屬性變為實線，border-color 屬性變更為 #663300 以搭配瀏覽器列連結與其他介面元素，並使陰影色彩符合標頭與頁尾背景的色彩 (#FFFFCC)，以呈現連貫性的視覺效果。因此，新的選取器為：

CSS

#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
}

新的資訊看板看起來如下所示。 (影像大小經過縮減)。

使用其他瀏覽器建立陰影

如同 border-radius 屬性 (在如何使用 CSS3 新增圓角主題中已說明)，不同瀏覽器廠商及版本會提供不同等級的 box-shadow 屬性支援。

確認與其他瀏覽器及舊版瀏覽器是否有回溯相容性的最佳方法，是瀏覽對應的瀏覽器廠商網站。視瀏覽器與版本而定，您可能只要使用對應的廠商特定首碼，就可以複製 box-shadow 屬性。例如上節的資訊看板範例，應該可以使用下列選取器在多數常見的瀏覽器中產生類似的結果：

CSS

#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    -moz-border-radius: 10em 0 5em 2em;
    -webkit-border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
    -moz-box-shadow: 10px 10px 10px #FFFFCC inset;
    -webkit-box-shadow: 10px 10px 10px #FFFFCC inset;
}

若要確認 box-shadow 的支援與行為，請瀏覽對應的瀏覽器廠商網站：