Question

我已经将以下css设置为div容器的ger边框图像，但问题是我的右图像没有正确地出现在边框上，但是当它伸出时它会从div容器的右边框侧留下空格。

<div id="container">
<div id="left-image"></div>
<div id="main-containts">
    <div id="data-containts">
    data
    </div>
</div>
<div id="right-image"></div>



   <div id="bottom">

       <div id="bottom-left"></div>
       <div id="bottom-center"></div>
       <div id="bottom-right"></div>

   </div>


</div>



div#container{
    position:relative;
    margin-left:120px;
    margin-right:120px;
    float:top;
    padding-top:0;
    margin-bottom:50px;
    width:auto;
    height:100%;
}
div#left-image{
    position:absolute;
    left:0;
    width:28px;
    height:100%;
    float:left;
    background:url(border-left.png) repeat-y;   
    }

   div#right-image{
    position:absolute;
    right:0;
    float:right;
    width:30px;
    height:100%;
    margin-right:0;
    background:url(border-right.png) repeat-y;
    }   
    div#bottom{
    position:absolute;
    bottom:0;
    width:100%;
    height:36px;
    z-index:100;
   }
    div#bottom-left{
width:51px;
height:36px;
background:url(corner-left.png) no-repeat;
float:left;
}   
div#bottom-center{

height:36px;
background:url(bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}       
    div#bottom-right{
width:49px;
height:36px;
background:url(corner-right.png) no-repeat;
float:right;
margin-top:-36px;

}

Answer 1

如果您的目标是仅支持css3的现代浏览器。它可以通过css3 border-image 属性轻松完成。如果您不知道，有必要查看该物业。

http://css-tricks.com/understanding-border-image/

如果您希望上述代码能够正常工作，请注意。请使用div结构。

如何在div标签的边框处使用图像以提供自定义边框外观？

1 个答案: