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{ 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>
|