框外模型的邊框圖像

Question

我目前正在開發一個組合項目，我有一個標題的概念，但我很難實現它。

我想使我的標題（和頁腳的頂部邊框）的底部邊框看起來像是一個畫筆描邊。正如我的photobucket鏈接中所見。

http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50243PM.png

我創建了一個邊框圖像使用，但它變得隱藏在盒子模型，因爲頭背景顏色相同的邊界。我改變了背景色爲黑色，因此它可以很容易地看到

http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50110PM.png

所以我想知道的是：是否有辦法讓邊界圖像邊境外，而不是在裏面頭？

這是我的代碼有

HTML

<header> 
    <h1>My Name</h1> 
    <nav> 
     <ul> 
      <li><a href="#"><span id="current">Projects</span></a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</header> 

CSS

header{ 
    display: block; 
    background-color: black; 
    padding: 5px 10px; 
    border-bottom: 15px solid transparent; 
    border-image: url("border.png") 0 0 33 0; 
} 
h1{ 
    float: left; 
} 
nav{ 
    text-align: right; 
} 
nav li{ 
    display: inline; 
    list-style: none; 
} 

任何意見，將不勝感激，謝謝！

Answer 1

border-image-outset屬性指定邊框圖像區域超出邊框的數量。

http://www.w3schools.com/cssref/css3_pr_border-image-outset.asp

div { 
    border-image-source: url(border.png); 
    border-image-outset: 15px; 
} 

Answer 2

我相信你不應該這樣做。您可以將footer包裝成bordered-footer並將border添加到borderedfooter。通常，border是標籤的一部分。您可以將@設置爲@bpettijohn指出的內容，但我認爲如果您已經習慣了border的標準含義，那將會讓您感到困惑。