html - 元素内的边框图像（插图）

Question

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

html:

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

CSS：

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/