0

请帮助我，因为我没有为这个问题找到任何好的解决方案我已将以下 css 设置为 div 容器的 ger 边框图像，但问题是我的正确图像没有出现在边框上，但它留下了空格div容器的右边框展开时如何解决这个问题。

div#container{
    position:relative;
    margin-left:120px;
    margin-right:120px;
    float:top;
    /*margin-top:-14px;*/
    margin-bottom:50px;
    /*border:2px solid #000;*/
    width:auto;
    height:100%;

    }   
ul#ulmenu{
    padding-left:0;
    list-style:none;

    }
div#menus{
    width:900px;
    margin-top:7px;
    margin-bottom:5px;
    /*display:block;*/

    }       
ul#ulmenu li{
    margin-top:15px;
    float:left;
    line-height:16px;
    }

ul#ulmenu a{
    margin-top:13px;
    text-decoration:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    font-weight:bold;
    padding:8px;
    border:2px solid #060;
    background:#069;
    color:#FFF;
    }
ul#ulmenu a:hover, ul#ulmenu a:visited{
    background:#09F;
    color:#C06;
}
div#left-image{
    position:absolute;
    left:0;
    width:28px;
    height:100%;
    float:left;
    background:url(nios%20admin%20images/images/images/border-left.png) repeat-y;   
    }

div#right-image{
    position:absolute;
    display:compact;
    right:0;
    margin:0;
    width:30px;
    height:100%;
    float:right;
    background:url(nios%20admin%20images/images/images/border-right.png) repeat-y;
    }   
div#bottom{
    position:absolute;
    bottom:0;
    width:100%;
    /*border:2px solid #000;*/
    height:36px;
    z-index:100;
    }   
div#bottom-left{
    width:51px;
    height:36px;
    background:url(nios%20admin%20images/images/images/corner-left.png) no-repeat;
    float:left;
    }   
    div#bottom-center{

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

    }   

div#main-containts{
    position:absolute;
    margin-right:30px;
    left:25px;
    right:30px;
    padding:25px 10px;
    text-align:center;
    width:auto;}    
div#data-containts{
    /*position:absolute;*/
    margin-top:50px;
    padding-top:50px;
    }                   
#container #main-containts #data-containts strong {
    font-family: Tahoma, Geneva, sans-serif;
    color: #C03;
    font-size: 18px;
}
.msg {
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    color: #C06;
    font-size: 18px;
}
div#workspace{
    position:relative;}
</style>

</head>
<body>
<div id="workspace">
<div id="adminwrapper">
<div align="center">
<img src="images/adminbg-2.png" />
</div>
</div>

<div id="container">
<div id="left-image"></div>

<div id="main-containts" align="center">
    <div id="menus">
    <ul id="ulmenu">
    <li><a href="index.php?act=admin_logout" >Logout</a></li>
    <li><a href="javascript:void(0);" OnClick="c_pass()">Change-Password</a></li>
    <li><a href="#" >Back-Up</a></li>
    <li><a href="students.php?act=show_stud_rec" >Students</a></li>
    </ul>
    </div>
    <div id="data-containts">
    <span class="msg">{$msg}</span> </div>
    <br/>
    <p>
   {$body_data}
    </p>
</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>
</body>
</html>
4

1 回答 1

4

您可以使用border-image css 属性。

它在这里详细给出：http ://css-tricks.com/understanding-border-image/

这是演示：http ://www.norabrowndesign.com/css-experiments/border-image-anim.html

于 2012-07-03T18:45:37.590 回答