截至目前（2015年1月31日），有一种方法可以在不使用canvas的情况下，使用纯CSS且仅使用两行代码。
诀窍是使用cssfilter和-webkit-filterproperties绘制两个没有模糊的阴影，一个用于正轴，一个用于负轴，这些阴影将环绕图像，从而提供（希望）所需的效果。
注意：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 render）需要更多的调整，您可以看到右侧边框比左侧边框小。
考虑到这一点，这里是完美的边框代码片段（小提琴），仅具有很小的价值调整。
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">希望这可以帮助任何想知道半透明图像具有环绕边框的人！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句