Question

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

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

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

解决这个问题的一种方法是使用canvas，但是不是有一种纯粹，简单的css方法吗？感谢。

Answer 1

截至目前（ 2015年1月31日），有一种方法可以在不使用画布的情况下使用纯CSS，只需要2行代码。

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

注意：IE中根本不支持css过滤器（让我们希望Spartan做得更好），这里是compatibility table。（谢谢web-tiki）

第一个代码段（fiddle）将应用最简单的边框。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

考虑到这一点，这里是完美的边框片段（fiddle），只有很小的价值调整。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

希望这有助于任何人想知道半透明图像的环绕边界的可能性！

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

1 个答案:

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

1 个答案:

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