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

StackOverflow https://stackoverflow.com/questions/7089

Вопрос

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

Это было полезно?

Решение

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

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

  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 на данный момент..

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

Здесь:a .htc файл поведения для получения round-corners От border-radius значение в вашем CSS.Например.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Конечно, behavior selector не является допустимым селектором, но вы можете поместить его в другой css-файл с условными комментариями (только для IE).

Тот Самый поведение файла HTC

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

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

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

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

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

Вот решение для 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 угла собраны вместе.Выглядит как круг.

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

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

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

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

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

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

Более новый РУЗИ.Затененная граница это еще один вариант, но в нем отсутствует поддержка получения информации о стиле из CSS.

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

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

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

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

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

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

Общий обзор этого трюка заключается в том, что он использует вложенные DIVS и повторение фонового изображения и позиционирование.Для макетов фиксированной ширины (fixed width stretchable height) вам понадобятся три DIVS и три изображения.Для гибкого макета ширины (растягиваемая ширина и высота) вам понадобится девять DIVS и девять изображений.Кто-то может посчитать это слишком сложным, но ИМХО это самое аккуратное решение из когда-либо существовавших.Никаких взломов, никакого 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 попробовать.Он помещает элемент Canvas HTML5 на задний план и позволяет вам рисовать любой фон или границу, которые вы хотите.Закругленные углы, градиенты и так далее.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top