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是标记的一部分。您可以将border-image-outset设置为@bpettijohn指出，但我认为以后当您已经习惯border的标准含义时会感到困惑。

框模型之外的边界图像

2 个答案: