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

Question

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

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/