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


253

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


Вот хорошее видео о том, как сделать закругленные углы, используя только CSS: < sampsonvideos.com/video.php?video=12 >
Стэн,


3
200+ лайков говорит, что это конструктивно.
SteveCav

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

За исключением того, что это информация, которую тривиально можно найти во многих других местах в Интернете. Для SO нет необходимости дублировать существующие ресурсы.
Джим Гаррисон

Ответы:


102

Поскольку 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

1
я считаю DD_roundies идеальным решением: dillerdesign.com/experiment/DD_roundies/#nogo
vsync

1
@vsync, но это не очень хорошо поддерживается в IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers
Джитендра Вьяс

5
полезная ссылка, если вы решили использовать CSS3 (например, SO) border-radius.com (еще одна ссылка css3.info/border-radius-apple-vs-mozilla )
mickthompson

третья ссылка не работает cssjuice.com/25-ounded-corners-techniques-with-css
Кришна

80

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

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

border-radius:

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

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


5
"... прошел через канализацию?" Это немного грубо, Джефф. Ответ: «Это зависит». Одноцветные, градиентные или теневые боксы? Они должны расширяться вертикально, горизонтально или оба? Разные решения для разных требований. Чем выше требования, тем более похожее на канализацию решение.
Carl Camera

28
Я бы предпочел использовать этот метод. Если браузер не поддерживает его, кого это волнует?
Сэм Мюррей-Саттон

11
Twitter понижает функцию закругленных углов до острых углов на своем сайте для пользователей IE. Ничего страшного на самом деле.
Ланс Фишер

5
Я бы определенно использовал этот подход - давайте разберемся с вещами такими, какие они есть. Если кто-то не использует браузер (т.е. IE), он заслуживает того, чтобы закругленные углы были угловыми. :)
thSoft

1
Я хочу отклонить этот ответ, потому что он не описывает то, что ответчик (Джефф) считает лучшим способом.
allyourcode

27

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


16

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


это полностью сработало для меня, наряду с определением углов -moz и т. д. для других браузеров.
Бхарал

13

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


1
У javascript определенно самый высокий уровень провала, и, судя по всему, он мерцает. все плагины jquery, которые я пробовал, имеют неожиданные побочные эффекты
Simon_Weaver

CurvyCorners ( curvycorners.net ) и ShadedBorder ( ruzee.com/blog/shadedborder ) действительно поддерживают сглаживание. Существуют также способы использования этой дополнительной разметки без разметки, которую можно реализовать с помощью класса, а затем разметка динамически добавляется к классифицированным элементам. Тем не менее, чем больше я их использую, тем больше вы, кажется, правы ... они полезны для создания прототипов, но добавляют дополнительный вес DOM. Теперь, когда мои настройки настроены так, как я хочу, я планирую преобразовать их в изображения.
Бен Регенспан

1
Этот ответ не содержит достаточно подробностей, чтобы кто-то мог реализовать то, что думает ответчик.
allyourcode

11

Как сказал Браджешвар: Использование 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


4
никогда не понимал, почему так много людей занимается проверкой CSS. это ничего не значит, важна только проверка DOM.
vsync

Это похоже на путь.
Мэтью Оленик

3
Можете ли вы добавить краткое объяснение, что такое файл поведения? Я думаю, что человек, ищущий ответ на этот вопрос, вероятно, не будет знаком с ними.
allyourcode

2
Кажется, что ссылка на файл поведения мертва
evanmcd

9

С поддержкой 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;

1
Ваш синтаксис для -webkit-border-bottom-rightright-radius: 3px; и -webkit-border-top-rightright-radius: 10px; следует читать -webkit-border-bottom-right-radius: 3px и -webkit-border-top-right-radius: 10px;
Wolfr

8

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


@mcaulay - поддерживает ли тень на коробке?
nickytonline

jquery roundcorners не поддерживает IE 8.
evanmcd

6

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

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


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


Все это можно упростить с помощью CSS-спрайтов, возможно, я обновлю свой ответ.
mbillard

Там я обновил код для использования спрайт-листа.
mbillard


5

В 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.


5

Вот решение 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.


3

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

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


Я хочу найти ту часть страницы YUI, о которой вы говорите, но ни один из пунктов, на которые я смотрел, не говорит, что попытка получить закругленные углы - плохая идея. Можете быть более конкретными? Я нашел одну часть, которая обсуждает разговоры о том, как вы должны устанавливать ширину по-разному при использовании закругленных углов, но не препятствует этому.
allyourcode

@allourcode - я тоже больше этого не вижу. я помню, как делал этот пост, но не совсем то, что они сказали. однако, похоже, что во второй ссылке выше они упоминают об удалении поддержки IE для закругленных углов 1px. но в любом случае этот пост был немного языком в щеку, поскольку они говорят только о углах 1px, что я считаю огромной тратой времени! я помню, что в то время, когда я писал это, я был разочарован закругленными углами и остановился на изображениях углов
Simon_Weaver

2

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

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


2

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

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


1

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

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

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



1

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

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

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


0

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

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


0

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.