使用CSS3，您可以將陰影應(yīng)用于元素上。
CSS3使您能夠像在Photoshop中一樣向元素添加陰影效果，而無需使用任何圖像。在CSS3之前，切片圖像用于在非常煩人的元素周圍創(chuàng)建陰影。
下一節(jié)將介紹如何在文字和元素上應(yīng)用陰影。
box-shadow屬性可用于向元素的框中添加陰影。您甚至可以使用逗號分隔的陰影列表應(yīng)用多個陰影效果。創(chuàng)建盒子陰影的基本語法可以通過以下方式給出：
box-shadow: offset-x offset-y blur-radius color;
該box-shadow屬性的組件具有以下含義：
offset-x —設(shè)置陰影的水平偏移量。
offset-y —設(shè)置陰影的垂直偏移。
blur-radius —設(shè)置模糊半徑。值越大，模糊越大，陰影的邊緣越模糊。不允許使用負(fù)值。
color —設(shè)置陰影的顏色。如果省略或未指定顏色值，則它將采用color屬性的值。
請參考CSS3 box-shadow屬性，以了解有關(guān)其他可能值的更多信息。
.box{
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}測試看看?/?注意：添加時box-shadow，如果未指定模糊半徑分量的值或?qū)⑵湓O(shè)置為零（0），則陰影的邊緣將變清晰。
同樣，您可以使用逗號分隔的列表添加多框陰影：
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}測試看看?/?您可以使用text-shadow屬性在文本上應(yīng)用陰影效果。 您還可以使用與box-shadow相同的表示法對文本應(yīng)用多個陰影。
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}測試看看?/?