CSS: Добавление Div в Div (обсуждение за круглым углом)

Question

В настоящее время я использую комбинацию тегов CSS и Div для получения закругленных углов в текстовом элементе. Это CSS, который я использую:

div#installerSearch {
    float: left;
    position: relative;
    color: #000055;
    width: 154px;
    border: 1px solid #2A5390;
    padding: 8px;
    background-image: url('images/background.png');
}

div.roundAllGreen {
    position: absolute;
    width: 8px;
    height: 8px;
    background-image: url('images/roundgreenthingy.png');
}

div.roundTopLeft {
    left: -1px;
    top: -1px;
    background-position: 0px 0px;    
}

div.roundTopRight {
    right: -1px;
    top: -1px;
    background-position: -7px 0px;    
}

div.roundBottomLeft {
    left: -1px;
    bottom: -1px;
    background-position: 0px -7px;    
}

div.roundBottomRight {
    right: -1px;
    bottom: -1px;
    background-position: -7px -7px;    
}

и вот такой HTML-код:

<div id="installerSearch">
    <div class="roundAll roundTopLeft"></div>
    <div class="roundAll roundTopRight"></div>
    <div class="roundAll roundBottomLeft"></div>
    <div class="roundAll roundBottomRight"></div>
    <p> ... </p>
</div>

Может кто-нибудь еще определить проблему? Я прибегнул (из-за отсутствия лучшего метода) к включению представления в виде разметки, что немного затрудняет изменение темы, как я пытаюсь это сделать.

Что мне действительно нужно, так это возможность добавлять теги CSS в div для контейнера. Я понимаю, что это нарушает правило «нет содержимого в CSS» на уровне кода, но, учитывая, что мои закругленные углы вряд ли можно отнести к контенту, это не нарушает его в моей книге.

Так что я думаю, что я спрашиваю, есть ли хороший способ добиться того же эффекта (закругленные углы с использованием изображений) без необходимости добавлять дополнительные теги в мой контент с помощью CSS? Идея здесь состоит в том, чтобы в итоге получить лист CSS, который я могу полностью заменить, не внося изменений в мою HTML-страницу шаблона, но если это невозможно, я приму это в качестве ответа. Кажется, на этот раз Google совершенно не справляется со мной. ^ _ ^

Answer 1

Краткий ответ: в настоящее время не очень хорошо поддерживается только для CSS способ сделать это.

Если вы не можете дождаться поддержки CSS3, вы можете обратиться к альтернативам JavaScript. Nifty Corners Cube добавит закругленные углы и притязания даже на сглаживание. Есть также много угловых плагинов jQuery , и этот делает много различных угловых эффектов.

Есть ли конкретная причина, по которой вы хотите использовать изображения для углов? Если все, что вам нужно, это круглый угол, вы можете получить с помощью вышеупомянутых решений JavaScript. Я действительно рекомендовал бы взглянуть на примеры Nifty Corners Cube.

Редактировать: Если вы обеспокоены тем, что дополнительная разметка может повредить эффективности вашей поисковой системы, тогда решение на JavaScript будет иметь больше смысла (хотя, на мой взгляд, лучше всего будет использовать решение только для CSS), поскольку дополнительная разметка будет добавлена ​​на стороне клиента. Я работал с несколькими поисковыми системами, и они преднамеренно удаляют теги сценариев перед индексацией содержимого.

Answer 2

Может кто-нибудь еще определить проблему?

Разница в классе Name между roundAll и roundAllGreen?

Я прибегнул (из-за отсутствия лучшего метода) к включению представления в виде разметки, что затрудняет изменение темы, как я пытаюсь сделать.

Некоторая интерференция с разметкой неизбежна до тех пор, пока (а) IE не поддержит радиус границы или (б) не станет возможным создание нескольких фоновых изображений для одного элемента.

Другая возможность с несколько меньшими помехами - это фоновое вложение:

<div class="box"><div><div><div>
    Hello
</div></div></div></div>

.box { background: url(topleft.png) top left no-repeat; }
.box div { background: url(topright.png) top right no-repeat; }
.box div div { background: url(bottomleft.png) bottom left no-repeat; }
.box div div div { background: url(bottomright.png) bottom right no-repeat; }

На вашей текущей странице ширина поля фиксирована, поэтому вы можете выбрать только два вложенных элемента div, один для верхнего края и один для нижнего.

Answer 3

один мод для решения Бобинса:

<div class="box"><div><div><div>
    Hello
</div></div></div></div>

.box { background: url(topleft.png) top left no-repeat; }
.box>div { background: url(topright.png) top right no-repeat; }
.box>div>div { background: url(bottomleft.png) bottom left no-repeat; }
.box>div>div>div { background: url(bottomright.png) bottom right no-repeat; }

Answer 4

Еще один плагин jquery, который работает очень хорошо: Сглаженные закругленные углы с JQuery

Answer 5

Вы можете написать JavaScript, который добавит эти div для вас. Но это огромная проблема в CSS, в любом случае это зависит от контента, что бы ни говорили другие.