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

Posted 2023-03-06

【中文标题】如何向 <rect> 添加阴影 [重复]

【英文标题】：How to add a shadow to <rect> [duplicate]

【发布时间】：2013-12-25 05:19:09

【问题描述】：

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

http://codepen.io/anon/pen/rhKxd

<svg  >
  <rect   stroke- 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

【参考方案1】：

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

<rect   stroke-
      transform="translate(255,105)" class="shadow"></rect>

rect.shadow 
    fill: black;

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