html - 元素内的边框图像(插图)

Question

我有一个 png 文件 (1603px x 75px)，我想将其用作某个部分的边框。但我希望它出现在内部(插图)而不是外部。但我无法弄清楚如何使边框图像恰好进入(插入)图像高度，而不会使图像的垂直尺寸变形。

html:

    <section class="intro viewportheight_min" id="intro">

样式:

body, html, .container, section {
  height: 100%;
}
/*.container{margin:0 auto;}*/
section {
    width:100%;
    text-align:center;
}
section.intro {
/*  border-color:#06b4c8;*/
/*  border-style:solid;*/
/*  border-width:0 0 75px 0;*/
/*  -moz-box-sizing: border-box;*/
    padding-top: 1%;
    border-style: solid; 
    border-width: 0px 0px 75px 0px;
    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;
    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch; 
    -o-border-image: url(../img/vague.png) 0 0 75 stretch; 
    border-image: url(../img/vague.png) 0 0 70 fill stretch; 
}

Answer 1

尝试将 box-sizing: border-box; 属性添加到 section.intro 规则:

section.intro {
    ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/VL5Gw/