正確使用邊框圖像

我想在我創建的div中實現border-image屬性，我想要葉子圖像（http://imageshack.us/photo/my-images/703/leafy.png/）繞過div的邊緣。正確使用邊框圖像

我試圖做到這一點，但不能讓樹葉看起來正常，它們似乎在角落有重疊，我發現邊界圖像屬性真的讓人感到困惑和沮喪，希望有人能指出我朝着正確的方向！

，我使用的代碼是在這裏：jsfiddle.net/MQrd6/

而我想實現（大約）是在這裏：http://imageshack.us/a/img203/1029/concepto.png

而且我知道IE瀏覽器（像往常一樣）沒有按不支持border-image屬性，是否有解決方法？使用JavaScript或其他？

非常感謝所有幫助:)

來源

2013-04-25 Ben Green

對於我在鏈接中看到的內容，您還沒有開始:)對於全跨瀏覽器的解決方案，您可以使用「假邊界」。它是一個簡單而清潔的技術。爲了實現它，您需要了解：定位，z-index和一些佈局經驗。 – Fico 2013-04-25 11:25:29

你有什麼關於如何去做的鏈接？謝謝:) – 2013-04-25 11:27:18

你可以嘗試這樣的事：http://jsfiddle.net/MQrd6/3/

關鍵是要設置的border-image一樣border-width寬度：

#leaf { 
    width: 760px; 
    vertical-align: middle; 
    border-width: 22px; 
    border-image: url(http://img703.imageshack.us/img703/4976/leafy.png) 22 22 round; 
}

IE的版本不支持border-圖片。要在IE中提供支持，您可以嘗試CSS3pie，這是一個簡單的庫，允許您在IE6或更高版本中使用多個CSS3功能。

來源

2013-04-25 11:49:16 Arkana

它工作！非常感謝幫助並清除了一切！現在嘗試可怕的IE轉換：P 再次感謝！ – 2013-04-25 12:20:29

很高興爲您服務！ ;）如果你遇到CSS3Pie的任何問題，這個網站有很多相關的問題。運氣！ – Arkana 2013-04-25 12:24:54

剛剛嘗試過CSS3Pie v1.0和2.0beta，並且在這兩種情況下，border-image都不顯示：/ – 2013-04-25 12:33:15

有圖像邊界的CSS指令：

CSS

-moz-border-image:url("border-image.png") 25 30 10 20 repeat; 
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat; 
border-image:url("border-image.png") 25 30 10 20 repeat;

和

http://css-tricks.com/almanac/properties/b/border-image/

來源

2013-04-25 11:11:40

我已經諮詢過這兩個問題，正如你可以在我的示例代碼中看到的那樣，它並沒有解決問題，我希望有人能夠指出我出錯的地方，而不僅僅是發佈一個標準的響應，不過謝謝！ – 2013-04-25 11:17:26

正確使用邊框圖像

回答

相關問題