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

С момента появления CSS3 лучший способ добавить закругленные углы с помощью CSS - использовать свойство border-radius. Вы можете прочитать спецификацию в собственности или получить полезная информация о реализации на MDN:

Если вы используете браузер с невоплощать в жизньborder-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), то ссылки ниже подробно описывают целый ряд различных подходов. Найдите тот, который подходит вашему сайту и стилю кодирования, и следуйте ему.

1. CSS-дизайн: создание нестандартных углов & Границы
2. CSS закругленные углы 'Roundup'
3. 25 приемов закругленных углов с помощью CSS

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

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

border-radius:

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

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

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

Всегда есть способ 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;
}

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

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

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

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

<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 получит широкую поддержку с помощью border-radius, это станет официальным лучшим способом создания закругленных углов.

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

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

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

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

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

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 угла упакованы вместе. Похоже на круг.

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

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

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

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

-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;

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

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

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

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

Здесь: файл поведения .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

В 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, чтобы он выглядел закругленным, или используют границы и отрицательные поля, чтобы сделать углы с надрезом в 1 пиксель. Некоторые также могут использовать SVG в IE.

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

Я обычно получаю закругленные углы только с помощью 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.

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

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

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

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

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

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

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

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

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

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

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

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