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

Как я могу создать закругленные углы, используя 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

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

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 имел некоторые дополнительные функции и получал больше навыков.

Здесь: .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, вышеупомянутое также может быть написано в расширенном формате, и, таким образом, достигается другой радиус границы для верхнего, верхнего и т. Д.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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