CSS 过滤器在对象周围创建实心边框答案

【问题标题】：CSS Filters to create a solid border around an objectCSS 过滤器在对象周围创建实心边框
【发布时间】：2014-04-20 10:27:45
【问题描述】：

问题描述 (Fiddle)：

我正在尝试在具有透明度的 PNG 周围制作实心边框，因此 box-shadow 不是一个选项（因为它只会遮蔽图像的方角）。

我怎样才能让filter: drop-shadow() 在整个元素周围创建一个边框，而无需使用模糊或散布阴影？我可以将多个过滤器应用于同一元素以实现此效果吗？还是有其他方法可以做到这一点？

代码：

#object {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -211px;
    margin-top: -120px;
}

.shadow {
  -webkit-filter: drop-shadow(5px 5px white);
}

【问题讨论】：

为什么不只使用边框？我很困惑。
附带说明：如果图像本身是圆形的，显然您可以使用border-radius 属性来让box-shadow 工作。
@IanClark 因为，如前所述，它是透明的 PNG，边框不符合图像的形状。小提琴纯粹是这个问题的典范。
图片的形状？你的意思是因为它是一个圆圈？为什么不this work
当然，实现这一目标的最佳方法就是修改图像，它看起来不像这个过滤器可以完成这项工作，only webkit supports filters

标签： html css filter

【解决方案1】：

此后，微软宣布从 2021 年开始不再支持 IE 11。

所以，如果你想继续使用过滤器，你总是可以多次使用它。

这里：http://jsfiddle.net/ErickXavier/cw46Lso5/

.shadow {
  -webkit-filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white);
}

【讨论】：

【解决方案2】：

你可以的！！请检查 Codepen。 https://codepen.io/anon/pen/vzYGML

<filter id="border2" >
  <feMorphology operator="dilate" in="SourceAlpha" radius="2" />
  <feComponentTransfer>
    <feFuncR type="table" tableValues="1"/>
    <feFuncG type="table" tableValues="0"/>
    <feFuncB type="table" tableValues="1"/>
  </feComponentTransfer>
  <feComposite in="SourceGraphic" operator="over" />
</filter>

【讨论】：

【解决方案3】：

我同意@Ian，但如果您不关心don't support CSS 过滤器的非Webkit 网络浏览器，您可以复制图像并使用grayscale() 和brightness() 函数来伪造效果。

例如：

<div class="shadow">
    <img id="object" src="http://i.stack.imgur.com/yZgGX.png" />
</div>

div.shadow:before {
    content: url(http://i.stack.imgur.com/yZgGX.png);

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -211px;
    margin-top: -120px;

    z-index: 1;
    -webkit-filter: grayscale(100%) brightness(100);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

Example Here.

【讨论】：

我觉得使用:before 和content 有点好笑。如果您正在提供动态数据（似乎@daveycroqet 是），那么您将如何动态地为一系列图像实现这一点，因为您无法对:before 进行内联样式。我认为如果你真的想这样做，你最好以与我类似的方式复制内容，因为这样更容易设置样式。
@IanClark then how would you achieve this dynamically 我不能 :) 没有办法做到这一点。我想我错过了一些东西。然后我会恭敬地删除我的答案:)
你们都有巧妙的方法来处理这个问题。不要删除它，以防它为别人的目的服务！
哦，你现在有积分了，太可惜了！事实上现在是星期五，我们都试图回答这个奇怪的请求，我支持你！

【解决方案4】：

更新Oh look I did something!...我的答案仍然有效

所以，听起来你真正要问的问题是“如何使用 CSS 向非方形图像添加笔触”，我的答案是 - 你不能。正如你所发现的，看起来 webkit 能够通过filter、but that won't work on Firefox or IE 实现一些不错的效果，所以我真的不明白进一步探索过滤器的意义（除非你的所有观众都在使用 Webkit /眨眼）。

我的建议是自己编辑图像。也许您可以招募一个服务器端库，例如 GD 或 ImageMagick（可能是不好的解决方案，但我对 PHP 的了解就这些）来处理自动化。

【讨论】：

感谢大家的讨论。我仍然不确定这是我要走的路线，但至少我会尝试一下。而且，旁注，Firefox/Mozilla 确实通过 SVG 以有限的方式支持过滤器 (developer.mozilla.org/en-US/docs/Web/CSS/filter)（如果你可以称之为支持它的话）。同样，您甚至可以在 IE 中执行此操作 (demosthenes.info/blog/600/…)。不过，与 WebKit 相比，两者都非常不稳定，性能也很差。
@daveycroqet NP :) - 现在，我只想看看使用一些服务器端库来操作图像。例如，您只需使用它使图像变为白色，然后像我在示例中所做的那样transform: scale() 原始图像。
@IanClark 那太好了。唯一的缺点是它会导致服务器过载以动态提供图像。
@HashemQolami - 是的，我同意，但我建议缓存它们，这样你就不会一直这样做。或者使用其他程序一次性批量处理 1000 张图像:)