DIV上的圖像邊框

Question

是否可以使用寬度爲480px和高度爲360px的圖像並將其作爲邊框應用於div？我知道它可能實現下面的CSS代碼作爲邊框，但我似乎無法解決如何使用圖像。

border:1px solid blue; 

Answer 1

CSS3規範有border-image屬性。看看這篇文章：http://css-tricks.com/understanding-border-image/有關如何使用它的信息。

總結：

您應用的邊界圖像，像這樣：

border-image: url(border-image.png) 25% repeat; 

提供了一個網址給你的形象，在哪裏切片圖像和應用的圖像元素的行爲邊境。

Answer 2

其實，你可以用一個技巧來做到這一點。看看我的demo使用Google作爲邊框圖像

基本上，這個想法是有兩個div。

<div id="borderDiv"><!-- This will serve as the border --> 
    <div id="inner"> 
    </div> 
</div> 

CSS

#borderDiv { 
    padding: 2px; /* This is the width of the border :P */ 
    background: url("borderimage.png"); 
} 
#inner { 
    background: #fff; 
} 

Answer 3

都與CSS3的答案和一個帶嵌套的div是很好的答案，但它取決於你的價值最。如果邊界圖像對您的設計至關重要，一個好的經驗法則是使用得到最廣泛支持的解決方案。在這種情況下，這將是嵌套的div。但是，如果語義標記和易用性對您更重要，請使用CSS3設計邊框圖像。只要意識到將有更少的瀏覽器支持，因此可以體會到這種效果的較小的觀衆。

最重要的是，瞭解您的主要受衆以及他們使用的瀏覽器。爲他們設計。