Как лучше всего сделать закругления для кроссбраузерности?

Тема в разделе "Верстка", создана пользователем danneo, 6 ноя 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.445
    Симпатии:
    113
    Есть фотографии в рамке, рамка с закругленными уголками, таким образом фото получается закругленное. Но на самом деле фото квадратное. Закругляться должно через CSS.
    Как лучше всего для кроссбраузерности, через div и float каждый угол или можно как-то через стиль, у которого прописать radius (как это не знаю, но в firefox так можно, но в IE это уже не работает)?
     
  2. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    115
    Симпатии:
    486
    danneo нравится это.
  3. sandi

    sandi

    Регистр.:
    30 май 2008
    Сообщения:
    314
    Симпатии:
    165
    Таким образом


    Код:
    .box {
    border:1px solid #ae037b;
    border-radius: 15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    behavior: url("border-radius.htc");
    height:200px;
    width:400px;
    background:#c146a4;}

    И чтобы осёл понимал свойство border-radius
    нужно будет подключить библиотеку border-radius.htc
     
  4. NiceBro

    NiceBro Создатель

    Регистр.:
    2 ноя 2012
    Сообщения:
    44
    Симпатии:
    25
    Кроссбарузерно даже в IE6 будет работать: http://cssround.com/?v=images
    <-- Viodele: А слабо ссылку на гугл под хайд спрятать? -->
     
  5. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.445
    Симпатии:
    113
    а закругления разве сейчас не делают с помощью картинок с уголками в div (float:right)?
     
  6. ukalen

    ukalen Писатель

    Регистр.:
    31 авг 2012
    Сообщения:
    8
    Симпатии:
    0
    Делают и картинками чтобы "осел" чувствовал себя как все, но я все же предпочитаю css3 фитчи. Можно и как background в диве...
     
  7. viryys

    viryys Создатель

    Регистр.:
    26 окт 2012
    Сообщения:
    19
    Симпатии:
    1
  8. aaidlin

    aaidlin Создатель

    Регистр.:
    30 авг 2012
    Сообщения:
    20
    Симпатии:
    3
    Ну в общем с закруглениями пока дела в мире обстоят так:
    1) IE до сих пор не научился понимать CSS команду border-radius (с любыми приставками).
    2) В случае адаптивной верстки и для Opera каждому углу нужно прописывать скругление по отдельности: border-top-left-radius, border-top-right-radius ...
    3) Firefox скруглит только тот элемент, которому приписали свойства border-radius. Т.е. если картинка в диве, который скруглен, то отображаться картинка будет квадратно.
    4) Гугл Хром самый офигенный, скругляет все безо всяких проблем.
    5) Отсюда вывод: пока идеальное кроссбраузерное скругление возможно только картинками. Именно картинками сверстано на сайте компании Apple красивое меню.
     
    zavodnoyapl и danneo нравится это.
  9. indacircus

    indacircus Создатель

    Регистр.:
    18 окт 2011
    Сообщения:
    16
    Симпатии:
    2
    Вариантов множество. Предпочтительные:
    1. с использованием PIE.htc (сам часто пользуюсь) http://css3pie.com/
    2. дополнительными обертываниями в div-ы либо таблицу с картинками уголков (увеличение количества кода)
    3. самый любимый вариант :) если заказчик не принципиален, то используем border-radius и оповещаем любителей старых браузеров о том, что для корректного отображения надо сменить/обновить браузер
     
    pavel.handleman нравится это.
  10. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.590
    Симпатии:
    438
    не факт
    например, часто использую border-radius, а для ИЕ подключаю маленький скрипт DD_roundies (9 кб)

    все вместе:
    HTML:
    
    <style>
    #left a{ -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;}
    </style>
    <script src="js/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        DD_roundies.addRule("#left a", "15px");
    </script>
    
     
    AGENT131313 нравится это.