CSS3的box-shadow屬性用法詳解:
首先從名稱開始進行理解，box-shadow能夠分解為兩部分:
（1）.box:表示一個盒子，也就是我們說的一個元素，例如div之類。
（2）.shadow:投影的意思。
那麼這個屬性就是來設定元素的投影效果的。
本章節透過程式碼實例介紹一下box-shadow屬性的用法。
語法結構如下:
box-shadow:h-shadow v-shadow blur spread color inset;
參數解釋:
1.h-shadow:必需，設定元素陰影水平偏移量，可以為負值，單位是像素。
2.v-shadow:必需，設定元素陰影垂直偏移量，可以為負值，單位是像素。
3.blur:可選，陰影模糊半徑，只能夠為正值，如果為0，表示不具有模糊效果，單位像素。
4.spread:可選，陰影的擴展半徑尺寸，可以為負值，單位是像素。
5.color:可選，如果省略此參數，那麼瀏覽器會選取預設色，各個瀏覽器的預設是會不同，有的是透明，它會設定陰影的顏色。
6.inset:可選，可以將外部陰影改為內部陰影。
程式碼實例:
實例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上程式碼只設定了陰影的水平和垂直偏移量，並沒有模糊效果，同時沒有設定陰影的顏色，那麼瀏覽器會選取預設顏色，各個瀏覽器之間會有所不同，有的是黑色，有的是透明，不建議缺省此屬性。
實例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上程式碼設定了div的陰影偏移量和陰影的顏色。
實例三
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上程式碼設定了div陰影的水平和垂直偏移量、模糊半徑和陰影的顏色。
實例四:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上程式碼設定了div陰影的水平和垂直偏移量、模糊半徑、陰影擴展半徑和陰影的顏色。
實例五:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上程式碼可以為div設定為內陰影，並且設定了其他參數。
實例六:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
下一節