边框图像在 Chrome 和 FireFox 之间呈现不同答案

【问题标题】：border-image renders differently between Chrome and FireFox边框图像在 Chrome 和 FireFox 之间呈现不同
【发布时间】：2012-09-25 11:35:24
【问题描述】：

我目前正在使用 CSS3 border-image 并注意到在 Chrome 和 FireFox（最新版本）之间应用图像的方式存在差异。

我有一个非常基本的示例，我正在处理其中我将border-image 应用于一些textarea 标记来研究不同的效果。

在 FireFox 中，图像被分割成多个部分，并按预期应用到边框部分。正如我所期望的那样，中心是透明的。

在 Chrome 中，它对边框的作用相同，但也显示图像的中心。

浏览器是否应用了一些默认设置/样式，导致一个浏览器透明但另一个浏览器不透明？

这是我可以覆盖的设置/样式吗？

The Fiddle

编辑

我想，看到浏览器只是这样做，如果不能过度编写 CSS 中的行为，我能做些什么来确保图像在 2 个浏览器之间应用相同吗？

万一小提琴过时了，我也包括了下面的代码。

HTML：

<textarea class="no-image">some default text</textarea>
<textarea class="stretch">some default text</textarea>
<textarea class="round">some default text</textarea>
<textarea class="repeat">some default text</textarea>

CSS：

textarea{
    border: 50px solid #feb515;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    width: 500px;
    height: 100px;
    padding: 15px;
    border-image-slice: 5;
}

textarea.stretch{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
}


textarea.round{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
}

textarea.repeat{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
}

【问题讨论】：

太奇怪了——所以这个css技巧的例子对我来说似乎工作正常，但你的js小提琴不是。我不知道为什么。 css-tricks.com/understanding-border-image
@quoo：这很奇怪。我仔细检查了w3.org/TR/css3-background/#border-image-slice 的文档，它确实在border-image-slice The ‘fill’ keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.) 下说，我想知道 Chrome 是否有默认设置。

标签： css

【解决方案1】：

所以我已经让它工作了 - 我不确定为什么它在工作。

http://jsfiddle.net/6ysfr/2/

我认为可能是您的边框宽度需要与border-image中指定的数字匹配，并且我认为border-image-slice可能会搞砸。

没关系 - 我认为正如你所说 - 使用边框图像切片会导致 chrome 中的“填充”出现奇怪的行为。我的示例有效，因为它缺少边框切片的偏移量。

【讨论】：

感谢您的链接，我今晚必须在家里再次检查一下。即使我删除了我的基本样式，它仍然一团糟，所以我要开始从我的小提琴中剔除东西，直到它弹出。 +1 无论如何都是为了你的小提琴，否则我会假设 Chrome 总是填充背景。我会接受你的回答以及你的例子，显然我现在需要做剩下的研究来确定是什么搞砸了。再次感谢。
我还遇到了一个网站，其中提到了一些我认为与之相关的内容。没有细节，但他们使用的是没有中心的图像：zurb.com/playground/awesome-overlaysWhat can potentially screw things up is that it takes the center section and stretches it across your entire object. So to achieve a traditional border with a transparent object, we had to cut out the center of our border image.
是的，如果您可以选择，我会尝试剪切您的边框图像，这样您就不必使用 -border-image-slice 选项，这应该可以正常工作透明中心。