如何在半透明图像周围绘制边框？ （css）[重复]

Question

我想知道如何在半透明的图像周围绘制边框，也就是说，我不想要一个框形边框，也不想要一个边框半径，而是一个实际适用于图像本身形状的边框。

根据this post 是不可能的，this one 只是建议在一些照片编辑程序中编辑图像，例如 Photoshop。

但是如果图片输入不是我的呢？如果我需要为我的网站处理一系列用户输入的图像并添加该边框，则该软件选项将不起作用。

解决这个问题的一种方法是使用画布，但没有一种纯粹、简单的 css 方法吗？谢谢。

Answer 1

截至目前（2015 年 1 月 31 日），有一种方法可以在不使用画布、纯 CSS 且仅 2 行代码的情况下做到这一点。

诀窍是使用 css filter 和 -webkit-filter 属性绘制两个没有模糊的阴影，一个用于正轴，一个用于负轴，它将环绕图像，这将提供 (希望）想要的效果。

注意：IE 完全不支持 css 过滤器（希望 Spartan 做得更好），这里是 compatibility table。 （感谢web-tiki）

第一个 sn-p (fiddle) 将应用尽可能简单的边框。

img {
  -webkit-filter: drop-shadow(1px 1px 0 black)
                  drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(1px 1px 0 black) 
          drop-shadow(-1px -1px 0 black);
}

body {
  background-color: lightcoral;
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

如您所见，有些图片（如this awesome baymax render）需要稍微调整一下，您可以看到右边框比左边框小一点。

考虑到这一点，这里是完美的边框 sn-p (fiddle)，只是进行了非常小的值调整。

img {
  -webkit-filter: drop-shadow(2px 1px 0 black)
                  drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(2px 1px 0 black) 
          drop-shadow(-1px -1px 0 black);
}

body {
  background-color: khaki;
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

这应该很好地覆盖了边界，但我们仍然可以从中获得更多乐趣，看看这个很棒的lightness effect sn-p (fiddle)。

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

body{
    background-color:lightblue;
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

希望这可以帮助任何想为半透明图像设置环绕边框的人！