Question

我解决了新版本的firefox（15.0.1）和现在的边框图像功能问题。但是出现了一个新问题。内容未填充图片。

在所有浏览器中，背景都填充了边框图像，但新版本的firefox除外。

我的课程：

border-style: solid none solid solid;
border-width: 12px 0 12px 12px;

border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* CSS3 recommendation */
-moz-border-image: url("img/contents-entry.png") 12 0 12 12 stretch stretch; /* old Firefox */
-o-border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* Opera */
-webkit-border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* Safari */

background-color: transparent;

由于

更新：这是我在http://jsfiddle.net/angelcervera/8YWXs/中的测试：

div {
border-width:15px;
width:250px;
padding:10px 20px;
background-color: red;
}

#round {
border-style: solid;
border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") fill 30 30 30 30 stretch;
-moz-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Firefox */
-webkit-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Safari */
-o-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Opera */
}

我补充说：

background-color：red; ，以区分白色背景页面和div背景。
border-style：solid; border-image：url（＆＃34; border.png＆＃34;）在#round样式中填充30 30 30 30 stretch; 在firefox中工作，但不会填充。
我用不透明的图像更改了图像。

Answer 1

正如我在另一个问题中所说，你需要：

border-image: url("img/contents-entry.png") fill 12 0 12 12 stretch;

如果你想填充盒子的中心区域。见http://www.w3.org/TR/css3-background/#border-image-slice

css3 border-image firefox 15.0.1（第二轮）

1 个答案: