如何在div標籤的邊框上使用圖像來爲圖像定製邊框外觀？

請幫我在這個，因爲我沒有得到任何好的解決方案，這個問題我已經設置下面的CSS Ger容器的邊界圖像，但問題是，我的右圖像不是在邊界上正確的，但它離開當它擴展出如何解決這個問題時，從div容器的右邊框的空格。如何在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>

來源

2012-07-03 rasheed

請編輯的問題，包括僅有相關的代碼。這是你發佈的很多代碼。 – Utkanos

CSS3邊框圖片不是更好的選擇嗎？ – j08691