如何在CSS中使用圖片作爲邊框

我想將表格的邊框設置爲「1px純黑色」，除了底部，我想使用提供指向鏈接的圖片的圖片 - 作爲一個視覺輔助。如何在CSS中使用圖片作爲邊框

當其他邊框是正常的css時，是否可以將圖像設置爲底部邊框。

2009-07-13 Ankur

我不這麼認爲。你可能最好在桌子底下添加一個<DIV>，給它一個黑色的邊框，一個固定的背景，以及一些固定的填充或什麼東西（給它一定的尺寸）。

2009-07-13 09:03:24 exclsr

您可以設置這樣的邊界不同的是底部邊框：

border-top:1px solid black; 
border-right:1px solid black; 
border-left:1px solid black;

對於底部邊框，你也許可以將您的圖像作爲行背景。

來源

2009-07-13 09:03:31 Canavar

不是，你爲什麼不嘗試另一個錶行？

來源

2009-07-13 09:03:31 usoban

使用表格進行佈局，呃？ Tsk，tsk，tsk。 ;-) – Treb 2009-07-13 09:05:09

我知道，我知道:) – Ankur 2009-07-13 09:07:31

嘗試把表內<div class="myTableContainer"></div>，然後：

.myTableContainer{ 
    padding-bottom: 1px; 
    background: url(myBorderImage.png) bottom left; 
}

這應該在所有瀏覽器正常工作。

來源

2009-07-13 09:03:59 warpech

一個解決方案是在css中用背景圖像設置元素的樣式，然後在CSS中指定背景的偏移量。背景可以從元素的邊緣以外突出（例如div或li元素）。這可以用於許多不同的效果，一個是使用純CSS的陰影的外觀。

這裏的一些細節：

http://www.alistapart.com/articles/cssdropshadows/

來源

2009-07-13 09:09:27

嘗試把一個你的表格下方再設置他的風格像

.bottomborder { 
    height:1px; 
    background-image:url("yourImage.png"); 
}

應工作良好。

編輯：邊框頂部，當然，左，邊境圖像適合你的表「固體1px的黑」

來源

2009-07-13 09:18:15

CSS3增加了支持。您可以在http://www.w3.org/TR/css3-background/#border-images找到更多信息。在這一點上（2012年初），由於缺乏對所有版本IE的支持，使用它可能並不安全。要追蹤何時可以安全使用，您可以訪問http://caniuse.com/#search=border-image。模擬邊框圖像樣式的一種方法是使用定位的背景圖像。例如，模擬頂部邊框：

div 
{ 
    background-image: url('topBorder.gif'); 
    background-position: top; 
    background-repeat: repeat-x; 
}

來源

2012-01-21 13:04:33

現在有CSS3和border-image屬性，用於，但仍不能對所有的瀏覽器。

好吧，讓我們來看看關於此主題的W3Schools link。

來源

2013-01-23 11:59:58 F0G

如何在CSS中使用圖片作爲邊框

回答

相關問題