关于这个问题: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 中工作,但不能填充。
- 我用不透明的图像更改了图像。