在 macOS 上使用 CSS 实现阴影

在 macOS 上使用 CSS 实现阴影效果需要了解几个属性，包括 box-shadow、text-shadow 和 drop-shadow。接下来将介绍这几个属性的使用方法以及对应的效果。

box-shadow

box-shadow 属性可以为一个元素添加一个或多个阴影效果。它的语法如下：

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

其中，h-shadow 和 v-shadow 分别表示水平和垂直阴影的偏移量，单位可以是 px、em 或者百分比；blur 表示模糊程度，单位为 px；spread 表示阴影的扩散程度，单位为 px；color 表示阴影的颜色，可以是命名颜色、十六进制颜色值或者 rgba() 函数；inset 表示阴影是否位于元素内部。

下面是一个例子：

<div class="box-shadow">Box Shadow Example</div>

.box-shadow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

效果如下：

text-shadow

text-shadow 属性可以为文本添加阴影效果。它的语法如下：

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

其中，h-shadow 和 v-shadow 分别表示水平和垂直阴影的偏移量，单位可以是 px、em 或者百分比；blur 表示模糊程度，单位为 px；color 表示阴影的颜色，可以是命名颜色、十六进制颜色值或者 rgba() 函数。

下面是一个例子：

<div class="text-shadow">Text Shadow Example</div>

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

效果如下：

drop-shadow

drop-shadow 是 SVG 的一个滤镜，但也可以通过 CSS 应用于元素或图片。它可以为元素或图片添加一个阴影效果，类似于 box-shadow，但是可以处理 SVG 的透明区域和透明度。它的语法如下：

filter: drop-shadow(h-shadow v-shadow blur color);

其中，h-shadow 和 v-shadow 分别表示水平和垂直阴影的偏移量，单位可以是 px、em 或者百分比；blur 表示模糊程度，单位为 px；color 表示阴影的颜色，可以是命名颜色、十六进制颜色值或者 rgba() 函数。

下面是一个例子：

<img class="drop-shadow" src="https://images.unsplash.com/photo-1504198322258-cfa612f37fde" alt="Drop Shadow Example">

.drop-shadow {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

效果如下：

以上就是在 macOS 上使用 CSS 实现阴影效果的介绍，希望对你有帮助！