2014-02-17 84 views
-1

我正在使用CSS創建一個圍繞內容的邊框,但只有角落圖像顯示,而不是重複的頂端或底部。CSS:邊框只有一半作品

.blog { 
-moz-border-image: url(divborder.png) 30 27 27 repeat; 
-webkit-border-image: url(divborder.png) 30 27 27 repeat; 
-o-border-image: url(divborder.png) 30 27 27 repeat; 
border-image: url(divborder.png) 30 27 27 fi; 
color: #000; 
background-color: #FFF; 
border-top-width: 30px; 
border-right-width: 30px; 
border-bottom-width: 30px; 
border-left-width: 30px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 

}

任何想法,爲什麼它可能無法正常工作?我想不出任何事情。 感謝您的閱讀!

編輯:

這裏是我使用的圖像:

http://i.stack.imgur.com/OSnQL.png

我使用標準div標籤將其添加到我的HTML。

設法解決IT THANKYOU使用:

border-style: solid; 
border-width: 27px; 
-moz-border-image: url(divborder.png) 27 stretch; 
-webkit-border-image: url(divborder.png) 27 stretch; 
-o-border-image: url(divborder.png) 27 stretch; 
border-image: url(divborder.png) 27 stretch; 

不知道什麼是錯的最後一個,乾杯!

+0

只是一個提示:另外發布在jsfiddle.net創建的演示可以幫助很多這樣的問題。 – Matthew

+0

爲什麼你不使用這個短的:border:30px solid #FFF; –

回答

0

不要以爲有一個屬性叫fi。也許你的意思是fill

border-image: url(divborder.png) 30 27 27 fill;

+0

謝謝,但沒有運氣 – user3286723

0

這也許?

border-image: url(divborder.png) 30 27 27 fill repeat; 

也只是一個建議,這裏是一個精簡的格式,因爲你的邊框寬度和樣式是統一的。

.blog { 
    -moz-border-image: url(divborder.png) 30 27 27 repeat; 
    -webkit-border-image: url(divborder.png) 30 27 27 repeat; 
    -o-border-image: url(divborder.png) 30 27 27 repeat; 
    border-image: url(divborder.png) 30 27 27 fill repeat; 
    color: #000; 
    background-color: #FFF; 
    border-width: 30px; 
    border-style: solid; 
} 
+0

沒有運氣對不起,我正在使用

加載它。有沒有反對把div放入div的規則? – user3286723

+0

奇數,似乎正常使用您的圖像作爲例子。 http://codepen.io/anon/pen/FJDLB – jonsuh