CSS Webkit 蒙版图像添加轮廓/边框？

Question

我在彩色背景上使用带有 png 文件的 -webkit-mask-box-image 来实现我想要的任何颜色的形状，而不必使用每种颜色的文件。

background-color: blue;
-webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");

我将使用更复杂的形状，jsfiddle 中的六边形只是一个示例：

http://jsfiddle.net/TtR3b/

有什么简单的方法可以为生成的形状添加轮廓吗？我希望有一些属性或方法允许这样做，或者可能有一些方法来操纵蒙版图像以允许轮廓？

我试过这个，但添加的任何东西都只是形成了面具的一部分，即使轮廓是不同的颜色。我唯一的其他选择是覆盖一个仅包含我想要的轮廓的额外图像，但如果有更好的方法，这似乎很浪费。

Answer 1

所以我可以在第一张图片后面使用第二张图片，稍微大一点。

#mask {
  position: absolute;
  width: 98%;
  height: 98%;
  top: 1%;
  left: 1%;
  background-color: blue;
  -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

#maskborder {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: red;
  -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

<div id="maskborder">
  <div id="mask"></div>
</div>

编辑：http://jsfiddle.net/TtR3b/2/