css3中怎样给盒子添加阴影效果

CSS3中可以通过box-shadow属性给盒子添加阴影效果。box-shadow属性可以在盒子的周围创建一个或多个阴影。以下是使用box-shadow属性添加阴影效果的方法：

1. 基本语法：

box-shadow: h-shadow v-shadow blur spread color inset;

- h-shadow：水平阴影的位置，可以是正值（向右）或负值（向左）。

- v-shadow：垂直阴影的位置，可以是正值（向下）或负值（向上）。

- blur：可选，模糊距离。

- spread：可选，阴影的尺寸。

- color：可选，阴影的颜色。

- inset：可选，将阴影设置为内阴影。

2. 示例：

.box {

width: 200px;

height: 200px;

background-color: #f1f1f1;

box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);

上述示例代码将在.box元素周围创建一个2px水平偏移、2px垂直偏移、5px模糊距离、2px阴影尺寸的阴影效果，颜色为rgba(0, 0, 0, 0.3)。

3. 多个阴影：

.box {

width: 200px;

height: 200px;

background-color: #f1f1f1;

box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3),

-2px -2px 5px 2px rgba(255, 255, 255, 0.3);

上述示例代码在.box元素周围创建了两个阴影效果，一个是黑色的阴影，另一个是白色的阴影。

4. 内阴影：

.box {

width: 200px;

height: 200px;

background-color: #f1f1f1;

box-shadow: inset 2px 2px 5px 2px rgba(0, 0, 0, 0.3);

上述示例代码将在.box元素内部创建一个2px水平偏移、2px垂直偏移、5px模糊距离、2px阴影尺寸的内阴影效果，颜色为rgba(0, 0, 0, 0.3)。

通过使用box-shadow属性，可以轻松地为盒子添加阴影效果，使页面元素更加生动和立体。

千锋教育拥有多年IT培训服务经验，开设Java培训、web前端培训、大数据培训，python培训、软件测试培训等课程，采用全程面授高品质、高体验教学模式，拥有国内一体化教学管理及学员服务，想获取更多IT技术干货请关注千锋教育IT培训机构官网。