Html 框模型外部的边框图像

我目前正在做一个投资组合项目，我有一个标题的概念，但我很难实现它

我想让页眉的下边框（和页脚的上边框）看起来像画笔笔划。正如我的photobucket链接所示

我创建了一个要使用的边框图像，但它在框模型中被隐藏，因为标题背景颜色与边框相同。我把背景颜色改成了黑色，这样可以很容易地看到

所以我想知道的是：有没有一种方法可以让边框图像在标题的外部而不是内部加边框

这是我的密码

HTML

---

如有任何建议，将不胜感激，谢谢

边框图像开始属性指定边框图像区域超出边框框的范围

---

我认为你不应该这样做。您可以将

页脚

包装成一个

带边框的页脚

，并将

边框

添加到

带边框的页脚

。通常，

边框

是标记的一部分。正如@bpettijohn所指出的，您可以设置

边框图像开头

，但我认为，当您已经习惯了

边框

的标准含义时，这会让您感到困惑

<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>

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;
}

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