-webkit-border-image with css sprites

Question

我使用-webkit-border-image在样式中指定我的主sprite图像。精灵图像是一堆按钮图像。我应该使用什么样式属性来索引我的主精灵图像？

.red {
    -webkit-border-image: url(sprite.png) 0 14 0 14;
}

红色按钮精灵位于x=0，y=21。

我应该使用哪些属性？如果是背景，我会使用background-position。我不确定要为-webkit-border-image使用什么。

Answer 1

你不能用border-image做到这一点。根据this的说法，CSS3将为图像切片和图像精灵定义新的语法。

Answer 2

我的印象也是精灵不可能使用边框图像。但事实证明我错了。

边框图像语法如下：

border-image: url([file]) [offsettop] [offsetright] [offsetbottom] [offsetleft];

边框-图像绑定到边框宽度。可以使用偏移量来选择从原点开始显示的图像的数量(即10px的顶部偏移量+边框- 10px的顶部宽度将显示从像素0到像素10的10px )。

但是，如果您使用0px的边框宽度，可能会使用偏移量来隐藏图像的一部分。在这种情况下，您可以使用填充来实现与边框宽度相同的对齐方式。

请看这篇文章(我被Scott Murray更正，感谢Scott)以获取更多信息和演示：

http://alignedleft.com/blog/2010/07/using-css3-border-image-sprites-for-flexible-button-states/comment-page-1/#comment-832