更新Oh look I did something!...我的答案依然有效

因此，听起来您真正要问的问题是 “如何使用CSS向非方形图像添加笔划”，而我的答案是- * 您不能 *。正如您所发现的，webkit似乎能够使用filter、but that won't work on Firefox or IE、所以我真的看不出进一步探索过滤器的意义（除非你的所有观众都在使用Webkit/Blink）。
我的建议是自己编辑图像，也许你可以招募一个服务器端库，如GD或ImageMagick（可能是糟糕的解决方案，但这是我对PHP的全部了解）来处理自动化。

我同意@Ian的观点，但是如果你不关心don't support CSS过滤器的 * 非Webkit * Web浏览器，你可以复制图像，并使用grayscale()和brightness()函数的组合来伪造效果。
例如：

<div class="shadow">
    <img id="object" src="http://i.stack.imgur.com/yZgGX.png" />
</div>

div.shadow:before {
    content: url(http://i.stack.imgur.com/yZgGX.png);

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -211px;
    margin-top: -120px;

    z-index: 1;
    -webkit-filter: grayscale(100%) brightness(100);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

Example Here.

此后，微软宣布从2021年开始不再支持IE 11。
所以，如果你想继续使用过滤器，你总是可以多次使用它。
此处为：http://jsfiddle.net/ErickXavier/cw46Lso5/

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

下面是我找到的解决方案：

.myObject {
    filter: 
        drop-shadow( 1px  0px 0px black) 
        drop-shadow(-1px  0px 0px black)
        drop-shadow( 0px  1px 0px black) 
        drop-shadow( 0px -1px 0px black);
}

过滤器可以被链接，但是它们也会应用到之前过滤器的结果中。这就是为什么Erick的解决方案不起作用。
Ian/Hashem的缩放技术只适用于没有孔洞的凸图像，即使如此，除非你的图像是一个圆形，否则边界的厚度不会是均匀的。
另外，也不用费心添加厂商前缀了，2023年各大浏览器都支持CSS filter属性：https://caniuse.com/css-filters

你能做到的！！请检查Codepen. https://codepen.io/anon/pen/vzYGML

<filter id="border2" >
  <feMorphology operator="dilate" in="SourceAlpha" radius="2" />
  <feComponentTransfer>
    <feFuncR type="table" tableValues="1"/>
    <feFuncG type="table" tableValues="0"/>
    <feFuncB type="table" tableValues="1"/>
  </feComponentTransfer>
  <feComposite in="SourceGraphic" operator="over" />
</filter>