0

关于这个问题:css3 border-image firefox 15.0.1

我解决了新版本的 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 */
}

我补充说:

  • 背景颜色:红色;在 div 样式中区分白色背景页面和 div 背景。
  • 边框样式:实心;border-image:url("border.png") 填充 30 30 30 30 拉伸;在 #round 样式中可以在 Firefox 中工作,但不能填充。
  • 我用不透明的图像更改了图像。
4

1 回答 1

1

正如我在另一个问题中所说,您需要:

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

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

于 2012-09-14T07:19:47.030 回答