Question

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

我有一个非常基本的例子我正在搞乱，我正在将border-image应用于某些textarea标签来研究不同的效果。

在FireFox中，图像被分割成各个部分并按预期应用于边框部分。正如我所料，中心是透明的。

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

是否存在浏览器应用的默认设置/样式，导致一个浏览器的透明度，而不是其他浏览器？

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

The Fiddle

修改

我想，看到浏览器只是这样做，如果不能   在CSS中编写行为，我该怎么做才能确保图像   两个浏览器之间的应用相同吗？

如果小提琴变得陈旧，我也包括下面的代码。

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;
}

Answer 1

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

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

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

没关系 - 我认为这与你说的完全一样 - 使用border-image-slice导致奇怪的行为与chrome中的'fill'。我的示例有效，因为它缺少边框切片的偏移量。

border-image在Chrome和FireFox之间呈现不同的效果

The Fiddle

1 个答案: