网页实现圆角边框栏目的代码（背景图片为一张大图）div高度不确定。 在线

Question

<div class="bar">
<div class="titlebar">标题</div>
<div class="contentbar">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<div>
</div>
请不要简单的说什么用background-position,我要的是详细介绍，背景如图所示。

Answer 1

你到底想说什么？圆角一般情况是用图片，要求不高的时候可以用css控制，但是比较难看
先说说图片背景当圆角吧。
上面一层<div style="height:圆角图片的高度;width:宽度;overflow:hidden;记得加这个，不然兼容不好弄，">圆角图片</div>
<div style="overflow:Hidden;">内容就放这里</div>
<div style="下圆角图片跟上面圆角雷同"><img src="路径"></div>
另外一种方法，切下四个圆角的图片，小小个的
为了调整兼容需要套用两层div
<div style="position:relative;overflow:HIdden;兼容必须用到的，没有overflow:Hidden;圆角定位的时候会有点偏差。">
<img src="左上圆角" style="position:absolute;top:0px;left:0px;">
<img src="右上圆角" style="position:absolute;top:0px;right:0px;">
其他两个圆角类推吧
<div style="">
这里放内容的
</div>
</div>
这样子兼容就没问题了，内容也不必在乎多少，高度不用设置，
用css的方法的话跟第一种用图片的方法差不多，只是利用的是边框
<div style="height:0px;overflow:Hidden;width:98px;margin:0px auto;border-bottom:1px solid #000;"></div>
<div style="width:98px;border-left:1px solid #000;border-right:1px solid #000;overflow:hidden;">放内容的</div>
<div style="height:0px;overflow:Hidden;width:98px;margin:0px auto;border-bottom:1px solid #000;"></div>
一般不会用css做圆角的，不建议使用，不美观。还有其他各种方法都是大同小异的，就看你怎么用了！！
至于你的背景大图，我想说只能用background-position:但是你既然不想提这个。。。那我就不说这个方法了，对于你的背景，放弃我的想法追问

你这代码冗长得。。。额。让我说什么好呢？
首先，你的第一种方法，是在内容后面加一个空的DIV，以前就是这样做的，但不是我所想要的；

至于第二种，所谓纯CSS，为了几个圆角要加一些毫无语义化的空标签进去，这个更加不是我想要的。

我的结构已经讲得很清楚：
目的只有一个，用最简洁的代码，最符合W3C的标准。
不过现在已经搞定了，谢谢你的回答！

Answer 2

这个好像不能实现吧，DIV+CSS只能实现方方正正的，可能用JS可以实现；
要不就 背景图片是个圆角的 加上样式 background-repeat:repeat-y;不让他纵向重复追问

不用JS，很多人禁用脚本的。我是用背景图，做了圆角图片，上下两个盖子

追答

标题

内容

内容

内容

内容

.bar{background:#CCC;height:190px;width:200px;padding-top:10px;}

你把样式里加上个圆角的背景，不让他重复

追问

这个不能定义高度，内容不确定多少。还有，我的那张背景图由很多图标和边框，想要定位显示。

.bar{width:320px;background-image:url(/images/part/skin_1.gif);padding-bottom:3px;}
.titlebar{这里的背景也是同一张图不同位置}

标题

内容

琢磨N久不得要领。。。。

追答

没事 把高度删掉也没问题，只要内容够他就自动撑开了，不行就先设置一个最小高度 min-height 如果超出这个最小高度就自动增大
把titlebar设置margin-top移动一下位置就可以了吧

本回答被提问者采纳

Answer 3

js控制