html5阴影效果怎么做

边框阴影（box-shadow）的基本语法：

box-shadow：color  h-shadow  v-shadow blur spread  inset；

color：阴影颜色 ------------ 可选

h-shadow ：水平偏移量 ----必选       

v-shadow：垂直偏移量-----必选

blur：模糊距离 -------------可选

spread：阴影尺寸---------- 可选

inset：内阴影 --------------可选

例子：

css部分：

.div1{

width:200px

height:200px

margin:20px auto

line-height: 200px

text-align: center

background: cadetblue

border:2px solid darkslategray

box-shadow: darkgrey 10px 10px 30px 5px //边框阴影

}

html部分：

<div class="div1">边框阴影示例</div>

效果如图：

box-shadow:

属性向图形添加一个或多个阴影。

例如：向

div

元素添加

box-shadow：

div

{

box-shadow:

10px

10px

5px

#888888

}

分别表示水平阴影的位置、垂直阴影的位置、阴影模糊距离、阴影的颜色！

---