创建具有固定宽度和灵活高度的div

Question

我正在尝试创建一个具有固定宽度和灵活高度的div，here是我想用于背景的图片。问题是当我的div大于图像高度时，底部的圆角被省略了，而且如果我的div小于图像的大小相同的东西，我如何使用所有尺寸的圆角进行这项工作？谢谢

Answer 1

使用背景位置可确保您始终拥有圆角：

CSS：

background-position:bottom;

你必须创建一个具有很多额外高度的图像，这样如果div最终比预期的高，你总是有空间玩。

另一个选择是将div分成2个单独的div - 1作为主要内容部分，另一个只是将弯曲的角添加到底部。这将允许您使用1px高背景图像作为主div，并使用20px（ish）图像作为弯曲边框图像，从而减小文件大小。我附上了一个例子：Download Example

Answer 2

只需使用图像的底部，其他人使用边框样式。

<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
         <div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
          Some Content
         </div> 
    </div>

如果你需要在顶部有一个圆形边框，只需将样式“背景”添加到#myContent，顶部对齐和另一个图像。

Answer 3

将背景图像放在底部-add一些填充到div的底部，这样角落就会适合它。使bg图像真的很高。