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

Как создать закругленные углы с помощью CSS?

Ответов (21)

Решение

С момента появления 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

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

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

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

CSS3 ли , наконец , определить

border-radius:

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

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

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

It works quite well. No Javascript needed, just CSS and HTML. With minimal HTML interfering with the other stuff. It's very similar to what Mono posted, but doesn't contain any IE 6 specific hacks, and after checking, doesn't seem to work at all. Also, another trick is to make the inside portion of each corner image transparent so it doesn't block text that is near the corner. The outer portion must not be transparent so it can cover up the border of the non-rounded div.

Also, once CSS3 is widely supported with border-radius, that will be the official best way of making rounded corners.

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

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

Я обычно получаю закругленные углы только с помощью 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 упоминался несколько раз. Если вам нужен полный контроль над фоном и рамкой ваших элементов, попробуйте плагин jQuery Background Canvas . Он помещает элемент холста HTML5 на задний план и позволяет рисовать любой фон или границу, которую вы хотите. Закругленные углы, градиенты и так далее.

Мне лично больше всего нравится это решение, это .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 .