html5中怎么给图形绘制阴影

html-css010

html5中怎么给图形绘制阴影,第1张

box-shadow: 属性向图形添加一个或多个阴影。

例如:向 div 元素添加 box-shadow:

div

{

box-shadow: 10px 10px 5px #888888

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

边框阴影(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>

效果如图: