框外模型的边框图像

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的标准含义，那将会让您感到困惑。