SVG图像阴影CSS

SVG（Scalable Vector Graphics）是一种基于XML语言的矢量图形格式，可以无限放大而不失真，常常用于网页设计中。

阴影效果可以使SVG图像更加立体感和视觉效果，本文将介绍如何用CSS添加阴影效果。

CSS box-shadow 属性

CSS3中提供了box-shadow属性，用于在元素周围创建阴影效果。

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

参数说明：

• h-shadow：必需。水平阴影的位置，可以为负值。
• v-shadow：必需。垂直阴影的位置，可以为负值。
• blur：可选。模糊距离。
• spread：可选。阴影的大小。
• color：可选。阴影的颜色。
• inset：可选。将外部阴影（outset）改为内部阴影（inset）。

SVG图像中添加阴影效果

SVG图像实现阴影效果与普通元素一样，只需要将CSS中的box-shadow属性应用到SVG元素上即可。

例如，下面的代码将在SVG矩形中添加一个阴影效果：

<svg>
  <rect x="50" y="50" width="100" height="50" style="fill: #ff6347; box-shadow: 10px 10px 5px #888;"></rect>
</svg>

运行效果如下：

结语

SVG图像阴影效果可以为网页设计增添一份美感和艺术性，同时也增加了用户的视觉体验。通过box-shadow属性，可以轻松实现SVG图像阴影效果。