陰影box-shadow
CSS3的box-shadow屬性用法詳解:
首先從名稱開始進(jìn)行理解，box-shadow能夠分解為兩部分:
（1）.box:表示一個盒子，也就是我們說的一個元素，比如div之類。
（2）.shadow:投影的意思。
那么這個屬性就是來設(shè)置元素的投影效果的。
本章節(jié)通過代碼實(shí)例介紹一下box-shadow屬性的用法。
語法結(jié)構(gòu)如下:
box-shadow:h-shadow v-shadow blur spread color inset;
參數(shù)解釋:
1.h-shadow:必需，設(shè)置元素陰影水平偏移量，可以為負(fù)值，單位是像素。
2.v-shadow:必需，設(shè)置元素陰影垂直偏移量，可以為負(fù)值，單位是像素。
3.blur:可選，陰影模糊半徑，只能夠?yàn)檎?，如果?，表示不具有模糊效果，單位像素。
4.spread:可選，陰影的擴(kuò)展半徑尺寸，可以為負(fù)值，單位是像素。
5.color:可選，如果省略此參數(shù)，那么瀏覽器會選取默認(rèn)色，各個瀏覽器的默認(rèn)是會不同，有的為透明，它設(shè)置陰影的顏色。
6.inset:可選，可以將外部陰影改為內(nèi)部陰影。
代碼實(shí)例:
實(shí)例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代碼只設(shè)置了陰影的水平和垂直偏移量，并沒有模糊效果，同時沒有設(shè)置陰影的顏色，那么瀏覽器就會選取默認(rèn)顏色，各個瀏覽器之間會有所不同，有的是黑色，有的是透明，不建議缺省此屬性。
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>以上代碼設(shè)置了div的陰影偏移量和陰影的顏色。
實(shí)例三
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>以上代碼設(shè)置了div陰影的水平和垂直偏移量、模糊半徑和陰影的顏色。
實(shí)例四:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>以上代碼設(shè)置了div陰影的水平和垂直偏移量、模糊半徑、陰影擴(kuò)展半徑和陰影的顏色。
實(shí)例五:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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設(shè)置為內(nèi)陰影，并且設(shè)置了其他參數(shù)。
實(shí)例六:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>
