CSS中使用文本阴影与元素阴影效果

以下是关于CSS中使用文本阴影与元素阴影的完整攻略：

文本阴影

CSS提供了text-shadow属性，可以为文本添加阴影效果。

语法：

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：水平偏移量，必需的。
• v-shadow：垂直偏移量，必需的。
• blur-radius：模糊半径，可选。
• color：阴影颜色，可选。

示例1：为h1元素添加红色文本阴影

h1 {
  text-shadow: 2px 2px 5px red;
}

在上述示例中，水平偏移量2px和垂直偏移量2px表示阴影向右下方偏移，模糊半径5px表示阴影模糊程度为5个像素，阴影颜色为红色。

示例2：为p元素添加蓝色文本阴影

p {
  text-shadow: 1px 1px 1px blue;
}

在上述示例中，水平偏移量1px和垂直偏移量1px表示阴影向右下方偏移，模糊半径1px表示阴影模糊程度为1个像素，阴影颜色为蓝色。

元素阴影

CSS提供了box-shadow属性，可以为元素添加阴影效果。

语法：

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

• h-shadow：水平偏移量，必需的。
• v-shadow：垂直偏移量，必需的。
• blur：模糊半径，可选。
• spread：阴影扩散半径，可选。
• color：阴影颜色，可选。
• inset：可选参数，表示阴影是内阴影还是外阴影。

示例3：为button元素添加带有模糊效果的投影

button {
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.4);
}

在上述示例中，水平偏移量5px和垂直偏移量5px表示阴影向右下方偏移，模糊半径10px表示阴影模糊程度为10个像素，阴影扩散半径5px表示阴影半径为5个像素，颜色是黑色带有40%的透明度。

示例4：为div元素添加内阴影

div {
  box-shadow: inset 5px 5px 10px 5px rgba(0, 0, 0, 0.4);
}

在上述示例中，inset参数表示阴影是内阴影，其他参数的意义与示例3相同。

以上示例中的属性可以根据具体需求进行调整，达到不同的效果。

希望我的回答能够帮到你，如有不懂的地方可以继续问我哦。