带有圆角和图像的字段应该动态扩展答案

【问题标题】：field with rounded corners with Images should expand dynamically带有圆角和图像的字段应该动态扩展
【发布时间】：2012-01-12 04:01:32
【问题描述】：

我有一个表单，其中包含一些字段，并且根据选择的表单字段动态添加更多字段。一旦添加了新的表单字段，我如何让它水平和垂直扩展。我也应该为此使用精灵还是只放置一个带圆角的图像标签。我不想用 CSS3 来实现这一点。我可以使用clip 属性来实现这一点吗？

【问题讨论】：

如果您不使用固定宽度/高度，它会自动展开。至于圆角：如果你知道如何使用精灵当然更好

标签： javascript html css image rounded-corners

【解决方案1】：

从问题来看，您似乎希望您的容器 div 扩展。如果您没有在 CSS 中指定宽度和高度，容器会自动展开。

如果你已经在使用 jquery，你可以使用jquery corner 插件。那么您可以将其转角为：

$('#div').corner();

【讨论】：

感谢插件链接，但我不想要你假设的 +1

【解决方案2】：

为了创建圆角效果，我通常画一个圆，然后在需要圆角的元素内的 4 个绝对定位的 div 内将其用作背景。

每个绝对定位的 div 的高度是圆的高度的一半，每个 div 的宽度是圆的宽度的一半。

CSS

.roundedCorner  {
    background-color: #CECFD4;
    background-image: url("images/cornerSprite.png");
    height: 15px;
    overflow: hidden;
    position: absolute;
    width: 15px;
    z-index: 2;
}

.topRight  {
    background-position: 15px 0;
    right: 0;
    top: 0;
}

.topLeft  {
    background-position: 0 0;
    left: 0;
    top: 0;
}

.bottomLeft  {
    background-color: #CECFD4;
    background-position: 0 15px;
    bottom: 0;
    left: 0;
}

.bottomRight {
    background-position: 15px 15px;
    bottom: 0;
    right: 0;
}

HTML

<div>
    <div class="roundedCorner topRight"></div>
    <div class="roundedCorner topLeft"></div>
    <div class="roundedCorner bottomRight"></div>
    <div class="roundedCorner bottomLeft"></div>
    <p>Some content</p>
</div>

这样做有点冗长，但它适用于不支持通过 CSS 圆角的浏览器，并且可以扩展以适应任何元素大小。

JSFiddle：http://jsfiddle.net/UAyVJ/

【讨论】：