box-shadow 属性可以设置盒子的投影效果。它的原理同文本投影一样。字体风格 一节有介绍。
它有4个值，同时使用，也可以有选择地使用：
第一个值 设置阴影左右延伸长度，负值向左，正值向右
第二个值 设置阴影上下延伸长度，负值向上，正值向下
第三个值 设置阴影的模糊程度
第四个值 设置阴影的颜色
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>盒子边框图像</
title
>
<
style
>
div{
width:50px;
height:50px;
border:1px solid #333;
margin:20px;
}
div.one{
box-shadow: -5px 9px 2px #777777;
}
div.two {
box-shadow: 5px 9px 2px #777777;
}
</
style
>
</
head
>
<
body
>
<
h1
>利永贞网</
h1
>
<
h2
>学编程，上利永贞网</
h2
>
<
div
class
=
"one"
></
div
>
<
div
class
=
"two"
></
div
>
</
body
>
</
html
>
|
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
