Question

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

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/

内部边框图像（插图）

1 个答案: