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

Question

<分区>

Answer 1

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

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

注意:IE 完全不支持 css 过滤器(希望 Spartan 做得更好)，这里是 compatibility table . (感谢web-tiki)

第一个代码段 ( 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 )需要稍微调整一下，您可以看到右边框比左边框小一点。

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

这应该很好地覆盖了边界，但我们仍然可以从中获得更多乐趣，看看这个很棒的亮度效果片段 ( 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">

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