1. 图层阴影效果
CSS3中提供了给元素添加图层阴影效果的功能。通过设置元素的box-shadow属性，我们可以轻松地为元素添加投影效果，使其看起来更加立体、突出。box-shadow属性的语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;其中：
h-shadow：表示水平阴影的位置，可以使用负值或正值。
v-shadow：表示垂直阴影的位置，可以使用负值或正值。
blur：表示模糊的距离，可选值，默认为0。
spread：表示阴影的尺寸，可以使用负值或正值。
color：表示阴影的颜色。
inset：可选值，如果设置为inset，则阴影将内嵌，即在元素内部产生阴影。
示例：
假设我们有一个类名为box的div元素，想要为其添加一个具有立体感的阴影效果。
.box {
width: 200px;
height: 200px;
background-color: #f5f5f5;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);
}
上述代码中，我们使用box-shadow属性为box类添加了一个水平偏移量为4像素、垂直偏移量为4像素、模糊半径为10像素的阴影，颜色为rgba(0, 0, 0, 0.6)，即黑色的60%透明度的阴影。
这样，我们就为.box类的元素添加了一个立体感的阴影效果。
2. 文字阴影效果
CSS3中还提供了给文字添加阴影效果的功能。通过设置文字的text-shadow属性，我们可以使文字看起来更加鲜明、突出。text-shadow属性的语法如下：
text-shadow: h-shadow v-shadow blur color;其中：
h-shadow：表示水平阴影的位置，可以使用负值或正值。
v-shadow：表示垂直阴影的位置，可以使用负值或正值。
blur：表示模糊的距离，可选值，默认为0。
color：表示阴影的颜色。
示例：
假设我们有一个类名为title的h1元素，想要为其添加一个带有阴影效果的标题。
.title {
font-size: 24px;
color: #333333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
上述代码中，我们使用text-shadow属性为.title类的h1元素添加了一个水平偏移量为2像素、垂直偏移量为2像素、模糊半径为4像素的阴影，颜色为rgba(0, 0, 0, 0.6)，即黑色的60%透明度的阴影。
这样，我们就为.title类的h1标签添加了一个带有阴影效果的标题。