三、边框阴影
设置边框阴影box-shadow不会影响盒子的布局，即不会影响其兄弟元素的布局
spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值
可以设置多重边框阴影，实现更好的效果，增强立体感。
语法：box-shadow:offset-x offset-y blur spresd color position;
属性值说明：
offset-x ，offset-y指的是元素水平偏移量；
blur：表示阴影的模糊半径；
spread：阴影尺寸（从元素到阴影的距离），正值会在元素的各个方向按指定的数值延伸阴影，负值会使阴影收缩的比本身元素的尺寸还小。
color：阴影的颜色值；
position：可选，表示阴影的位置，默认值是外部阴影，关键字inset指的是内部阴影。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 50px;
background: yellowgreen;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
实现效果如下：
box-shadow属性还可以设置多重边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
} box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行结果如下图：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
