CSS3 Drop 陰影

使用 CSS3，你可以將陰影應用於元素。

使用 CSS3 Drop Shadows

CSS3 使你能夠像在 Photoshop 中一樣在不使用任何影象的情況下為元素新增陰影效果。在 CSS3 之前，切片影象用於在元素周圍建立非常煩人的陰影。

以下部分將介紹如何在文字和元素上應用陰影。

CSS3 box-shadow 屬性

box-shadow 屬性可用於向元素框新增陰影。你甚至可以使用以逗號分隔的陰影列表來應用多個陰影效果。建立框陰影的基本語法可以通過以下方式給出：

box-shadow: offset-x offset-y blur-radius color; 

box-shadow 屬性部分具有以下含義：

• offset-x - 設定陰影的水平偏移。
• offset-y - 設定陰影的垂直偏移量。
• blur-radius - 設定模糊半徑。值越大，模糊越大，陰影邊緣越模糊。不允許使用負值。
• color - 設定陰影的顏色。如果省略或未指定顏色值，則它將採用 color 屬性的值。

請參閱 CSS3 box-shadow 屬性以瞭解有關其他可能值的更多資訊。

.box{
    width: 200px;
    height: 150px;
    background: #ccc;
    box-shadow: 5px 5px 10px #999;
}

注意： 當新增 box-shadow 時，如果未指定 blur-radius 的值或其設定為零（0），則陰影的邊緣將變得清晰。

同樣，你可以使用逗號分隔列表新增多個框陰影：

.box{
    width: 200px;
    height: 150px;
    background: #000;
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

CSS3 text-shadow 屬性

你可以使用 text-shadow 屬性將陰影效果應用於文字。你還可以使用同 box-shadow 相同的表示法將多個陰影應用於文字。

h1 {
    text-shadow: 5px 5px 10px #666;
}
h2 {
    text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}