поле с закругленными углами с изображениями должно динамически расширяться

Question

У меня есть форма, в которой есть несколько полей, и дополнительные поля добавляются динамически на основе выбранных полей формы. Как заставить его расширяться как горизонтально, так и вертикально, как только будут добавлены новые поля формы. Также я должен использовать спрайты для этого или просто поставить тег изображения с закругленными углами Я не хочу достичь этого с помощью CSS3, пожалуйста. Могу ли я достичь этого, используя свойство clip.

Answer 1

Чтобы создать эффект закругленного угла, я обычно рисую круг, а затем использую его в качестве фона в пределах 4 абсолютно расположенных элементов в элементе, который нуждается в закругленных углах.

Высота каждого абсолютно расположенного элемента равна половине высоты круга, а ширина каждого элемента равна половине ширины круга.

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/

Answer 2

Судя по вопросу, похоже, что вы хотите, чтобы ваш контейнерный блок расширялся. Если вы не указали ширину и высоту в CSS, контейнер автоматически развернется.

Если вы уже используете jquery, вы можете использовать плагин jquery corner . тогда вы можете повернуть его как:

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