кросс-браузерный растягиваемый круглый угол с семантическим кодом и минимальным использованием изображений Является ли это возможным?

Question

Я знаю, что сделать за углом невозможно для IE без Javascript или изображений. Решение JS не будет работать, если JS отключен, поэтому я хочу перейти к опции изображения

Мне нужны любые изображения + решение CSS, чтобы сделать кросс-браузерный совместимый круглый угол div с минимальным , простым в создании и чистым семантическим и W3C действительный код, растягиваемый и минимальное использование изображений и фотошоп.

Я знаю о FF, и сафари можно делать с чистым CSS, но мне нужно кросс-браузерное решение без JavaScript. Я хочу сделать с минимальным использованием кода и изображений XHTML.

Answer 1

См. 25 Техник закругленных углов с CSS .

ThrashBox - создайте прямоугольники с закругленными углами с визуальным бликом и абсолютным минимальным количеством семантически правильной разметки.

_{(источник: cssjuice.com )}

XHTML:

<div class="sidebox">
    <div class="boxhead"><h2>Test Headline</h2></div>
    <div class="boxbody">
        <p>This is a short sample paragraph.</p>
        <p>And another one.</p>
    </div>
</div>

изменяемый размер коробки со свободно изменяемыми углами и поверхностью - изменяемый размер окна со скругленными углами.

_{(источник: cssjuice.com )}

Оба автора упоминают Раздвижные двери из CSS о пригодности к эксплуатации.

Answer 2

Я писал об этом несколько лет назад: семантический HTML, одно изображение, минимальный CSS, работает в большинстве браузеров. Совмещает несколько приемов.

http://www.the -haystack.com / 2006/03/16 / закругленные углы /

Тем не менее, я бы выбрал (-[prefix]-)border-radius в браузерах, которые его поддерживают, и оставил бы другие браузеры без изменений.

Answer 3

На этом сайте много " шикарных бордюров " и " Крейзи Корнерс ", Стю скалы!

Кроме того, вы не указали свой вопрос о полях или кнопках, поэтому вы можете проверить эти ссылки для некоторых методов CSS:

SO ответ и некоторые ссылки: Сексуальные кнопки и небьющиеся кнопки

Answer 4

Я бы просто сделал что-то подобное

<div id="box">
    <p>content</p>
    <span class="top-left"></span>
    <span class="top-right"></span>
    <span class="bottom-left"></span>
    <span class="bottom-right"></span>
</div>

И расположите span s в углах с абсолютным позиционированием. Он немного загрязнен span s, но он будет работать в разных браузерах. Возможно, вам удастся избавиться и от одного, и просто сделайте фон #box одним из угловых изображений.

Пожалуйста, используйте спрайты тоже. Нарисуйте круг и используйте отрицательные фоновые позиции для размещения квадранта в каждом диапазоне.

Если вы хотите быть настолько семантическим (и немного другим), насколько это возможно, вы можете обернуть все эти span в условный комментарий IE, применить border-radius к блоку, а затем применить стили для промежутков для нашего друга IE. Это, однако, показалось бы мне немного излишним.