盒阴影,即box-shadow,它是用来向边框添加一个或多个阴影。
先看案例,这里为div标签设置box-shadow属性值,产生的阴影效果如下图所示。
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>

语法:
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow表示水平阴影的位置,可以是负值,如果是负值,阴影在水平方向上则向左偏移;
v-shadow表示垂直阴影的位置,也可以是负值,负值表示垂直向上的阴影;
blur表示模糊半径,为零或忽略时阴影没有模糊效果;
spread表示阴影扩展尺寸;
color表示阴影的颜色;
inset表示内部阴影,缺省值是outset,即常见的外部阴影。
上面案例的对应关系是(看颜色):
box-shadow:h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 5px #888888;
盒阴影也可以设置多个阴影列表,用逗号隔开多组值。
这四组水平和垂直阴影偏移量都为零,模糊半径也为零,但是设置不同的逐渐增大的扩展半径及不同颜色值,这样便形成了类似多个边框的效果。
div
{
margin:50px;
width:300px;
height:100px;
background-color:yellow;
box-shadow:0 0 0 10px #03F,
0 0 0 20px #0066FF,
0 0 0 30px #0099FF,
0 0 0 40px #00CCFF;
}

阴影 负值 颜色 10 半径 垂直 88888 也可以 属性 效果
上一篇:我们的网站拿来干嘛用的?展示信息?NO!
下一篇:返回列表