css怎么设置阴影效果图

CSS阴影效果是CSS3新增的一个非常实用的功能，它可以为元素添加立体感和深度，使得页面更加美观，本文将详细介绍如何使用CSS设置阴影效果，包括内阴影、外阴影、线性阴影和径向阴影等。

一、内阴影(Inset Shadow)

内阴影是指阴影在元素的内部产生的效果，可以通过`box-shadow`属性来实现，`box-shadow`属性的语法如下：

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

– `h-offset`:水平偏移量，正值表示向右偏移，负值表示向左偏移；

– `v-offset`:垂直偏移量，正值表示向下偏移，负值表示向上偏移；

– `blur`:模糊距离，数值越大，阴影越模糊；

– `spread`:阴影的尺寸，正值表示阴影扩大，负值表示阴影缩小；

– `color`:阴影的颜色。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
}

二、外阴影(Outset Shadow)

外阴影是指阴影在元素的外部产生的效果，可以通过`text-shadow`属性来实现，`text-shadow`属性的语法如下：

text-shadow: h-offset v-offset blur spread color;

h1 {
  text-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
}

三、线性阴影(Linear Shadow)

线性阴影是指阴影沿元素的某一方向产生渐变的效果，可以通过`box-shadow`属性结合多个阴影来实现，线性渐变的方向可以通过设置`direction`属性来指定，示例代码如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.5); /* 实现左右两侧的线性渐变阴影 */
}

四、径向阴影(Radial Shadow)

径向阴影是指阴影沿元素的某一方向产生圆形渐变的效果，可以通过`box-shadow`属性结合多个阴影来实现，示例代码如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.5); /* 实现左右两侧的圆角矩形渐变阴影 */
}