UC知道css圆角 上下两图不能重合？奇怪
来源：百度知道 编辑：UC知道 时间：2024/05/30 22:47:00
做了个简单的圆角方框测试一下，层的背景图和标题h3的背景图都做的是宽度为200px*150px的gif图片，在ps里面是完全可以完全重合的，但是用css做效果后，上图和下图总是左右差一个像素，很是奇怪，不知道哪里出错咯？求解
<style type="text/css">
.yuanjiao{
margin:0;
width:200px;
background:url(bottom.gif) no-repeat bottom left;
padding:5px 5px;
}
.yuanjiao h3{
margin:0;
width:200px;
background:url(top.gif) no-repeat top left;
border-bottom:1px #FFCC66 solid;
}
</style>
</head>
<body>
<div class="yuanjiao">
<h3>标题<br /><br /><br /></h3>
正文正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：
</div>
<style type="text/css">
.yuanjiao{
margin:0;
width:200px;
background:url(bottom.gif) no-repeat bottom left;
padding:5px 5px;
}
.yuanjiao h3{
margin:0;
width:200px;
background:url(top.gif) no-repeat top left;
border-bottom:1px #FFCC66 solid;
}
</style>
</head>
<body>
<div class="yuanjiao">
<h3>标题<br /><br /><br /></h3>
正文正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：
</div>
padding:0;
原因：<h3>是内容的一部分，<div class="yuanjiao"></div>的样式为padding:5px 5px;那么<h3>的位置以<div class="yuanjiao"></div>为基准左右都退了5px,但你又限制了<h3>,width:200px，因此你整个水平方向的宽度都是畸形的。
改成以下的应该没问题：
<html>
<head>
<style type="text/css">
.yuanjiao{
margin:0;
width:200px;
background:url(bottom.gif) no-repeat bottom left;
padding:0;
}
.yuanjiao h3{
padding:5px 5px;
background:url(top.gif) no-repeat bottom left;
border-bottom:1px #FFCC66 solid;
}
</style>
</head>
<body>
<div class="yuanjiao">
<h3>标题<br /><br /><br /></h3>
正文正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：正文：
</div>
</body>
</html>
最简单的，把H3改成P标签好了，P标签里设置文字大小。