Создание закругленных углов с помощью CSS

Я посмотрел на это на ранней стадии создания Qaru и не смог найти никакого способа создания закругленных углов, которые не оставляли меня ощущение, что я просто прошел через канализацию.

CSS3 наконец определяет

border-radius:

Это именно то, как вы хотите, чтобы он работал. Хотя это работает нормально в последних версиях Safari и Firefox, но совсем не в IE7 (и я не думаю, что в IE8) или в Opera.

Тем временем он взламывает весь путь вниз. Мне интересно узнать, что другие люди считают самым чистым способом сделать это через IE7, FF2/3, Safari3 и Opera 9.5 на данный момент.

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

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

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

но если вы хотите контролировать каждый угол, это хорошо:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Как вы видите в каждом наборе, у вас есть специфичные для браузера стили, а в четвертых строках мы объявляем стандартным способом, мы предполагаем, что в будущем другие (надеюсь, IE тоже) решают реализовать эту функцию, чтобы наш стиль был готов для они тоже.

Как сказано в других ответах, это прекрасно работает на Firefox, Safari, Camino, Chrome.

Если вам интересно создавать углы в IE, это может быть полезно - http://css3pie.com/

Я бы рекомендовал использовать фоновые изображения. Другие способы не так хороши: нет сглаживания и бессмысленной разметки. Это не место для использования JavaScript.

Как сказал Брайшвар: Использование селектора border-radius css3. К настоящему времени вы можете применять -moz-border-radius и -webkit-border-radius для браузеров на основе Mozilla и Webkit соответственно.

Итак, что происходит с Internet Explorer?. Microsoft имеет множество способов сделать Internet Explorer несколько дополнительных функций и получить больше навыков.

Здесь: a .htc файл поведения, чтобы получить значение round-corners от border-radius в вашем CSS. Например.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Конечно, селектор поведения не является допустимым селектором, но вы можете поместить его в другой файл css с условными комментариями (только для IE).

поведение файла HTC

С поддержкой CSS3, внедряемой в новых версиях Firefox, Safari и Chrome, также будет полезно посмотреть "Радиус границы".

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Как и любая другая стенограмма CSS, вышесказанное также может быть написано в расширенном формате и, таким образом, достигнет разного радиуса границы для topleft, topright и т.д.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQuery - это то, как я справляюсь с этим лично. css-поддержка минимальна, изображения слишком запутанны, чтобы иметь возможность выбирать элементы, которые вы хотите иметь круглые углы в jQuery, имеет для меня идеальный смысл, хотя некоторые, без сомнения, будут спорить иначе. Theres плагин, который я недавно использовал для проекта здесь: http://plugins.jquery.com/project/jquery-roundcorners-canvas

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

То, как я предпочитаю (хотя и имеет свои пределы), состоит в использовании 4 закругленных угловых изображений, которые вы будете позиционировать в 4 углах вашего окна, используя CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Как уже упоминалось, он имеет свои пределы (фон за закругленной коробкой должен быть простым, иначе углы не будут соответствовать фону), но он отлично работает для чего-либо еще.

Обновлено: Улучшено внедрение с использованием листа спрайтов.

Мне лично нравится это решение, лучшее, его .htc, чтобы IE отображал изогнутые границы.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

В Safari, Chrome, Firefox > 2, IE > 8 и Konquerer (и, возможно, другие) вы можете сделать это в CSS с помощью свойства border-radius. Поскольку это еще не официальная часть спецификации, пожалуйста, используйте специальный префикс поставщика...

Пример

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

В решениях JavaScript обычно добавляется куча маленьких div, чтобы они выглядели округлыми, или они используют границы и отрицательные поля, чтобы сделать 1px вырезанные углы. Некоторые могут также использовать SVG в IE.

IMO, способ CSS лучше, так как это легко, и будет грамотно деградировать в браузерах, которые его не поддерживают. Это, конечно, только тот случай, когда клиент не применяет их в не поддерживаемых браузерах, таких как IE < 9.

Вот решение HTML/js/css, которое я сделал недавно. Там ошибка округления 1px с абсолютным позиционированием в IE, поэтому вы хотите, чтобы контейнер был четным числом пикселей в ширину, но он довольно чистый.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

Изображение имеет ширину всего 18 пикселей и имеет все 4 угла, упакованные вместе. Похож на круг.

Примечание: вам не нужна вторая внутренняя оболочка, но мне нравится использовать margin во внутренней оболочке, чтобы поля на абзацах и заголовках все еще сохраняли крах. Вы также можете пропустить jquery и просто поместить внутреннюю оболочку в html.

Как указание на то, насколько сложно работать с закругленными углами, даже Yahoo отговаривает их (см. первую маркированную точку)! Разумеется, в этой статье они говорят только о 1 пикселе с закругленными углами, но интересно видеть, что даже компания с их опытом сделала вывод, что это просто слишком большая боль чтобы заставить их работать большую часть времени.

Если ваш дизайн может выжить без них, это самое простое решение.

Ruzee Borders - единственное основанное на Javascript антибликовое закругленное угловое решение, которое я нашел, которое работает во всех основных браузерах (Firefox 2/3, Chrome, Safari 3, IE6/7/8), и ТАКЖЕ - только тот, который работает, когда и округленный элемент, и родительский элемент содержат фоновое изображение. Он также имеет границы, тени и светится.

Более новый RUZEE.ShadedBorder - еще один вариант, но ему не хватает поддержки для получения информации о стиле из CSS.

Конечно, если он имеет фиксированную ширину, он очень легко использует CSS и вовсе не оскорбителен или трудоемкий. Это когда вам нужно, чтобы масштабировать в обоих направлениях, что все становится нестабильным. Некоторые из решений имеют ошеломляющее количество divs, уложенных друг на друга, чтобы это произошло.

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

В дополнение к упомянутым выше решениям htc, вот еще одно решение и примеры, чтобы достичь закругленных углов в IE.

Если вы хотите пойти с решением радиуса радиуса, есть этот удивительный веб-сайт для создания css, который заставит его работать для safari/chrome/FF.

В любом случае, я думаю, что ваш дизайн не должен зависеть от закругленного угла, и если вы посмотрите на Twitter, они просто скажут F **** для пользователей IE и Opera. Закругленные углы приятно иметь, и я лично поддерживаю это для классных пользователей, которые не используют IE:).

Теперь, конечно, это не мнение клиентов. Вот ссылка: http://border-radius.com/

Нет "лучшего" способа; есть способы, которые работают для вас и способы, которые этого не делают. Сказав это, я опубликовал статью о создании CSS + Image на основе метода кругового угла:

Коробка с круглыми углами с использованием CSS и изображений - Часть 2

Обзор этого трюка заключается в том, что он использует вложенные DIV и повторение и позиционирование фонового изображения. Для макетов фиксированной ширины (высота с фиксированной шириной растяжения) вам понадобятся три DIV и три изображения. Для макета ширины жидкости (растяжимая ширина и высота) вам понадобится девять DIV и девять изображений. Некоторые могут считать это слишком сложным, но IMHO - это самое опрятное решение. Нет хаков, нет JavaScript.

Не используйте CSS, jQuery упоминается несколько раз. Если вам нужен полный контроль над фоном и границей ваших элементов, попробуйте jQuery Background Canvas Plugin. Он помещает элемент Canvas HTML5 в фоновом режиме и позволяет вам рисовать каждый фон или рамку, которые вы хотите. Закругленные углы, градиенты и т.д.

Я написал статью в блоге об этом некоторое время назад, поэтому для получения дополнительной информации см. здесь

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Это работает очень хорошо. Нет необходимости в Javascript, просто CSS и HTML. С минимальным HTML мешает другим вещам. Он очень похож на то, что опубликовал Mono, но не содержит каких-либо конкретных хакеров IE 6 и после проверки, похоже, не работает вообще. Кроме того, еще один трюк состоит в том, чтобы сделать внутреннюю часть каждого изображения угла прозрачной, чтобы он не блокировал текст, который находится рядом с углом. Внешняя часть не должна быть прозрачной, чтобы она могла скрыть границу без закругленного div.

Кроме того, как только CSS3 будет широко поддерживаться с радиусом границы, это будет самый лучший способ сделать закругленные углы.

Opera еще не поддерживает пограничный радиус (видимо, он будет выпущен после версии 10). Тем временем вы можете использовать CSS для установки фона SVG для создания аналогичного эффекта.