武林網(www.49028c.com)文章簡介:CSS3的box-shadow屬性可以讓我們輕松實現圖層陰影效果。我們來實戰詳解一下這個屬性。
CSS3的box-shadow屬性可以讓我們輕松實現圖層陰影效果。我們來實戰詳解一下這個屬性。
1. box-shadow屬性的瀏覽器兼容性先來看一個這個屬性的瀏覽器兼容性:
2. box-shadow屬性的語法box-shadow有六個可設值:
img{box-shadow:陰影類型 X軸位移 Y軸位移 陰影大小 陰影擴展 陰影顏色 }
讓我們通過幾個實例來看一個box-shadow的效果,先弄個簡單的html供測試:
<html>
<head>
<style type="text/css">CSS部份寫在這里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>
請注意:為了省事兒,下面的CSS代碼中只寫了box-shadow,在實際使用中,你應該把-moz-box-shadow和-webkit-shadow也寫上。你需要做的很簡,復制兩個box-shadow,在它們前面分別加上-moz-和-webkit-。
img {新聞熱點
疑難解答