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/