如何在半透明图像周围绘制边框？(CSS)

Question

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

根据这篇文章这是不可能的，这个只是建议在某些照片编辑程序（例如 Photoshop）中编辑图像。

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

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

Answer 1

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

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

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

第一个片段（小提琴）将应用最简单的边框。

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">

正如你所看到的，一些图像（比如这个很棒的 baymax 渲染）需要更多的调整，你可以看到右边框比左边框小一点。

考虑到这一点，这里是完美的边框片段( 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">

这应该可以很好地覆盖边界，但我们仍然可以从中获得更多乐趣，看看这个很棒的亮度效果片段（小提琴）。

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">

希望这可以帮助任何想知道半透明图像环绕边框的可能性的人！