2012-09-13 48 views
0

在談到這個問題:css3 border-image firefox 15.0.1CSS3邊框圖像火狐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; 

感謝

UPDATE: 這是我在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樣式區分白色背景頁面和div背景。
  • border-style:solid; border-image:url(「border.png」)填充30 30 30 30 stretch;在#round樣式工作在Firefox中,但不填寫。
  • 我改變了圖像與不透明的圖像。
+0

我用一個示例測試編輯。 – angelcervera

回答

1

正如我在其他問題說,你需要:

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

,如果你想填補框的中心區。見http://www.w3.org/TR/css3-background/#border-image-slice

+0

是的,這是我的第一次測試,但不起作用。我用測試代碼更新了這個問題。我想我不懂規範。 – angelcervera

+1

你的小提琴設置了'border-image'和'-moz-border-image',但不包括後者中的'fill'。它們是彼此的別名,所以'-moz-border-image'覆蓋'border-image'。這就是爲什麼你希望把所有前綴的屬性放在前綴中的原因。 –