4

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

我有一个非常基本的例子，我正在使用它border-image来研究一些textarea标签来研究不同的效果。

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

在 Chrome 中，它对边框做同样的事情，但也显示图像的中心。

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

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

小提琴

编辑

我想，看到浏览器只是这样做，如果不能在 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;
}​
4

1 回答 1

1

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

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

我认为可能是您的边框宽度需要与边框图像中指定的数字相匹配，并且我认为边框图像切片可能会搞砸。

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

于 2012-10-04T14:10:15.270 回答