Jquery 如何使用div标签周围的边框上的图像为图像提供自定义边框外观？_Jquery_Html_Css

Jquery 如何使用div标签周围的边框上的图像为图像提供自定义边框外观？

jquery html css

Jquery 如何使用div标签周围的边框上的图像为图像提供自定义边框外观？,jquery,html,css,Jquery,Html,Css,请在这方面帮助我，因为我没有得到任何解决这个问题的好办法，我已经将下面的css设置为div容器的ger边框图像，但问题是，我的右图像没有正好出现在边框上，但它在扩展div容器的右边框侧留下了空间，如何解决这个问题 div#container{ position:relative; margin-left:120px; margin-right:120px; float:top; /*margin-top:-14px;*/ margin-bottom

请在这方面帮助我，因为我没有得到任何解决这个问题的好办法，我已经将下面的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>

div#容器{
位置：相对位置；
左边距：120像素；
右边距：120px；
浮动：顶部；
/*利润上限：-14px*/
边缘底部：50px；
/*边框：2倍实心#000*/
宽度：自动；
身高：100%；
}   
ul#ulmenu{
左侧填充：0；
列表样式：无；
}
div#菜单{
宽度：900px；
边缘顶部：7px；
边缘底部：5px；
/*显示：块*/
}       
ul#ulmenu li{
边缘顶部：15px；
浮动：左；
线高：16px；
}
ul#ula菜单{
边缘顶端：13px；
文字装饰：无；
字体系列：Verdana，日内瓦，无衬线；
字体大小：16px；
字体大小：粗体；
填充：8px；
边框：2px实心#060；
背景:#069 ;；
颜色：#FFF；
}
ul#ulmenu a:悬停，ul#ulmenu a:已访问{
背景：#09F；
颜色：#C06；
}
div#左图像{
位置：绝对位置；
左：0；
宽度：28px；
身高：100%；
浮动：左；
背景：url（nios%20admin%20images/images/images/border left.png）重复-y；
}
div#右图像{
位置：绝对位置；
显示器：紧凑型；
右：0；
保证金：0；
宽度：30px；
身高：100%；
浮动：对；
背景：url（nios%20admin%20images/images/images/border right.png）重复-y；
}   
舱底{
位置：绝对位置；
底部：0；
宽度：100%；
/*边框：2倍实心#000*/
高度：36px；
z指数：100；
}   
div#左下角{
宽度：51px；
高度：36px；
背景：url（nios%20admin%20images/images/images/corner left.png）不重复；
浮动：左；
}   
div#底部中心{
高度：36px；
背景：url（nios%20admin%20images/images/images/bottom image.png）repeat-x；
右边距：49px；
/*清楚：两者都是：*/
}       
div#右下角{
宽度：49px；
高度：36px；
背景：url（nios%20admin%20images/images/images/corner right.png）不重复；
浮动：对；
利润上限：-36px；
}   
分区#主容器{
位置：绝对位置；
右边距：30px；
左：25px；
右：30px；
填充：25px 10px；
文本对齐：居中；
宽度：自动；}
div#数据容器{
/*位置：绝对位置*/
边缘顶部：50px；
填充顶部：50px；
}                   
#容器#主容器#数据容器强{
字体系列：塔荷马，日内瓦，无衬线；
颜色：#C03；
字号：18px；
}
味精{
字体系列：塔荷马，日内瓦，无衬线；
字体大小：粗体；
颜色：#C06；
字号：18px；
}
分区#工作区{
位置：相对；}






{$msg}



{$body_data}

您可以使用边框图像css属性

详细内容如下：

这是演示：

您可以使用边框图像css属性

详细内容如下：

这是演示：

请编辑问题，只包含相关代码。您在那里发布的代码太多了。CSS3边框图像不是更好的选择吗？请编辑问题，只包含相关代码。你发布的代码太多了。CSS3边框图像不是更好的选择吗？亲爱的，这是我不能使用CSS3的条件，因为我想在所有类型的浏览器中运行。亲爱的，这是我不能使用CSS3的条件，因为我想在所有类型的浏览器中运行。