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

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

10.08.2008 08:08:21
Вот хорошее видео о том, как сделать закругленные углы, используя только CSS: < sampsonvideos.com/video.php?video=12 >
Stan 10.08.2008 08:16:10
200+ лайков говорит, что это конструктивно.
SteveCav 22.04.2015 06:53:35
Я считаю, что это ценный канонический вопрос, который заслуживает повторного рассмотрения, тем более что сейчас это вики сообщества.
DavidRR 18.05.2015 18:51:11
За исключением того, что это информация, которую тривиально можно найти во многих других местах в Интернете. Для SO нет необходимости дублировать существующие ресурсы.
Jim Garrison 4.06.2015 05:48:49
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
102
4.02.2014 19:50:54
я считаю DD_roundies идеальным решением: dillerdesign.com/experiment/DD_roundies/#nogo
vsync 31.07.2009 19:00:26
@vsync, но это не очень хорошо поддерживается в IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers
Jitendra Vyas 26.12.2009 05:41:37
полезная ссылка, если вы решили использовать CSS3 (например, SO) border-radius.com (еще одна ссылка css3.info/border-radius-apple-vs-mozilla )
mickthompson 18.06.2010 08:35:33
третья ссылка не работает cssjuice.com/25-ounded-corners-techniques-with-css
Krishna 1.09.2011 12:08:33

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

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

border-radius:

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

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

80
10.08.2008 08:28:52
"... прошел через канализацию?" Это немного грубо, Джефф. Ответ: «Это зависит». Коробки одного цвета, градиента или тени? Они должны расширяться вертикально, горизонтально или оба? Разные решения для разных требований. Чем выше требования, тем более похожее на канализацию решение.
Carl Camera 18.09.2008 20:32:24
Я бы предпочел использовать этот метод. Если браузер не поддерживает его, кого это волнует?
Sam Murray-Sutton 26.09.2008 09:21:34
Twitter понижает функцию закругленных углов до острых углов на своем сайте для пользователей IE. Ничего страшного на самом деле.
Lance Fisher 9.12.2008 06:56:10
Я бы определенно использовал этот подход - давайте разберемся с вещами как они есть. Если кто-то не использует браузер (т.е. IE), он заслуживает того, чтобы закругленные углы были угловыми. :)
thSoft 21.04.2010 20:58:04
Я хочу отклонить этот ответ, потому что он не описывает то, что ответчик (Джефф) считает лучшим способом.
allyourcode 7.06.2010 23:58:04

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

13
10.08.2008 08:51:29
У javascript определенно самый высокий уровень провала, и, судя по моему опыту, он мерцает. все плагины jquery, которые я пробовал, имеют неожиданные побочные эффекты
Simon_Weaver 8.07.2009 23:45:02
CurvyCorners ( curvycorners.net ) и ShadedBorder ( ruzee.com/blog/shadedborder ) действительно поддерживают сглаживание. Существуют также способы использования этих дополнительных разметок, которые можно реализовать с помощью класса, а затем разметка динамически добавляется к классифицированным элементам. Тем не менее, чем больше я их использую, тем больше вы, кажется, правы ... они полезны для создания прототипов, но добавляют дополнительный вес DOM. Теперь, когда мои настройки настроены так, как я хочу, я планирую преобразовать их в изображения.
Ben Regenspan 4.12.2009 13:59:36
Этот ответ не содержит достаточно подробностей, чтобы кто-то мог реализовать то, что думает ответчик.
allyourcode 8.06.2010 00:00:06

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

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


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

6
3.12.2016 18:25:13
Все это можно упростить с помощью CSS-спрайтов, возможно, я обновлю свой ответ.
mbillard 10.08.2009 21:09:06
Там я обновил код для использования спрайт-листа.
mbillard 12.08.2009 15:54:03

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

8
12.08.2008 20:01:45
@mcaulay - поддерживает ли тень на коробке?
nickytonline 3.12.2009 14:23:33
jquery roundcorners не поддерживает IE 8.
evanmcd 29.12.2010 22:07:36

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

<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
22.08.2008 12:41:23

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

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

2
3.09.2008 18:23:58

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

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

2
27.09.2008 20:16:35

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

5
1.06.2013 02:15:35

С поддержкой 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;
9
21.04.2010 20:53:30
Ваш синтаксис для -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 3.05.2009 10:10:32

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

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

3
20.09.2013 16:35:13
Я хочу найти ту часть страницы YUI, о которой вы говорите, но ни один из пунктов, на которые я смотрел, не говорит, что попытка получить закругленные углы - плохая идея. Можете быть более конкретными? Я нашел одну часть, в которой обсуждаются разговоры о том, как вы должны устанавливать ширину по-разному при использовании закругленных углов, но это не мешает.
allyourcode 8.06.2010 02:03:17
@allourcode - я тоже больше этого не вижу. я помню, как делал этот пост, но не совсем то, что они сказали. однако, похоже, что во второй ссылке выше они упоминают об удалении поддержки IE для закругленных углов 1px. но в любом случае этот пост был немного языком в щеку, поскольку они говорят только о углах 1px, что я считаю огромной тратой времени! я помню, что в то время, когда я писал это, я был расстроен в целом закругленными углами и остановился на изображениях углов
Simon_Weaver 9.06.2010 02:22:01

Как сказал Браджешвар: С помощью 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

11
16.11.2009 00:17:38
никогда не понимал, почему так много людей занимается проверкой CSS. это ничего не значит, важна только проверка DOM.
vsync 31.07.2009 19:04:23
Это похоже на путь.
Matthew Olenik 20.02.2010 06:33:43
Можете ли вы добавить краткое объяснение, что такое файл поведения? Я думаю, что человек, ищущий ответ на этот вопрос, вероятно, не будет знаком с ними.
allyourcode 8.06.2010 00:03:24
Кажется, что ссылка на файл поведения мертва
evanmcd 29.12.2010 22:04:57

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

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

5
14.11.2010 09:45:29

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

27
14.01.2016 18:20:09

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

0
31.08.2009 12:34:38

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

-1
31.08.2009 12:43:04

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

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

5
21.09.2009 10:17:04

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

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

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

1
3.09.2013 17:16:15

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

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

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

1
21.04.2010 21:17:43

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

16
27.07.2010 10:58:15
это полностью сработало для меня, наряду с определением углов -moz и т. д. для других браузеров.
bharal 26.01.2012 15:34:12

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

1
31.03.2011 13:15:40