• 一、box-shadow
  • 1.1 简介
  • 1.2 语法
  • 1.3 浏览器兼容
• 二、demo
  • 2.1 单/双边阴影效果
  • 2.2 四边相同阴影效果
  • 2.3 内阴影
  • 2.4 多层阴影
• 三、制作3D搜索表单

• 以下内容源于：《图解CSS3核心技术与案例实战》 第3章

一、box-shadow

1.1 简介

• box-shadow：定义元素的盒子阴影。

1.2 语法

box-shadow: none | [inset x-offset y-offset blur-radius spread-radius color]

1.3 浏览器兼容

二、demo

2.1 单/双边阴影效果

• 点击打开demo

• 从这个 demo 可以得出以下结论：

2.2 四边相同阴影效果

• 先看第一个demo：【点击打开demo1】

• 从上图可以知道：box-shadow 扩展半径的效果类似于边框的效果，但实际上并不是非边框，因为 box-shadow 并不是盒模型中的元素，不会计算内容宽度，看一下下面的demo2。【点击打开demo1】

2.3 内阴影

• 点击打开demo

2.4 多层阴影

• 点击打开demo

• 使用多层级 box-shadow 时，需注意最先写的阴影将显示在最顶层。先定义 1px 红色阴影，再定义 5px 蓝色阴影，结果红色在蓝色上。【如果前面的阴影太大，顶层的阴影会遮盖底部的阴影】

三、制作3D搜索表单

• 点击打开demo