如何向 <rect> 添加阴影 [重复]答案

【问题标题】：How to add a shadow to <rect> [duplicate]如何向 <rect> 添加阴影 [重复]
【发布时间】：2013-12-25 05:19:09
【问题描述】：

我正在尝试以最简单的方式为<rect> 元素添加阴影效果。我尝试了一系列不同的过滤器和 CSS 属性，但都不起作用。

<svg width="960" height="500">
  <rect width="170" height="100" stroke-width="0" transform="translate(250,100)"></rect>
</svg>

CSS：

rect {
  fill: orange;
  box-shadow: 2px 2px 2px #666;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

唯一有效的是带有偏移和模糊的 SVG 滤镜，但这是唯一的方法吗？

【问题讨论】：

我怀疑你写错了 css Ref: w3schools.com/svg/svg_feoffset.asp

标签： css svg

【解决方案1】：

嗯，另一种创建阴影的简单方法是复制位于它后面的对象，稍微偏移并使用不同的颜色：

<rect width="170" height="100" stroke-width="0"
      transform="translate(255,105)" class="shadow"></rect>

rect.shadow {
    fill: black;
}

请注意，.shadow rect 必须在正常之前定义，以便它最终在下面分层。

【讨论】：