html - 使用背景图标拆分 css 边框

Question

我正在尝试用背景图片划分边框。我不知道这样是否可行。希望有人能帮我想出一个干净的好方法来实现这一目标。

我正在尝试获得底部的那个，而顶部的那个就是我现在拥有的。

.tinybanner h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    border-bottom: 1px solid $green;
    display: inline-block;
    @include adjust-font-size-to(24px);
    background: url('images/tinybanner.png') center bottom no-repeat;
}

Answer 1

通过使用伪选择器:after，你可以在每个h1之后添加一个元素:

h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    border-bottom: 1px solid green;
    display: inline-block;
    position: relative;
}
h1:after {
    position: absolute;
    left: 50%; /* center the element */
    margin-left: -15px; /* shift left by (width+border)/2 */
    display: block;
    content: ''; 
    width: 20px;
    height: 20px;
    background: green; /* this can of course be a background image, too */
    border: 10px solid white; /* adds a gap to the left and right */
}

我喜欢这种方法的原因是它可以很好地降级。如果您的浏览器不支持 :after 伪选择器，您仍然会在标题下方留下边框(因为它是在 h1 上设置的，而不是伪选择器元素)并且看不到悬挂的背景图像(因为它是在 h1:after 上设置的)。

http://jsfiddle.net/stevemchey/YFXGa/