box-shadow陰影屬性的使用
- box-shadow的效果及使用
提示
部落客：章飛_906285288
部落格位址：http://blog.csdn.net/qq_29924041
box-shadow的效果及使用
box-shadow也叫做盒子的陰影，主要是針對塊級元素來說的，給盒子增加類似3d的陰影效果
使用如下:
box-shadow:h-shadow v-shadow blur spread color( outset/inset)
h-shadow:水準方向上的偏移量(向右為正，左為負)
v-shadow:垂直方向上的偏移量(向下為正，向上為負)
blur:模糊半徑(可選)
spread:陰影的大小(可選)
color:陰影的顔色(可選)
outset外部陰影(預設)/inset内部陰影
box-shadow在我們css的效果使用中相對是比較頻繁的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
ul,ol{margin: ; list-style: none; padding: ;}
a{ text-decoration: none; }
*{ margin: ; padding: ; }
.main{width: px;box-shadow: px px px px deeppink ;margin: px auto}
</style>
</head>
<body>
<div class="main">
<p>box-shadow的效果</p>
</div>
</body>
</html>
注意上屬性值的使用，具體的調試測試其實可以在控制台上面去調試，可以很清晰的看到他們的值的變化會帶來的一些效果的變化
![box-shadow 為元素添加陰影[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)