Создание закругленных углов с помощью 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 file

С поддержкой 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 минимальна, изображения слишком fiddly, чтобы иметь возможность выбирать элементы, которые вы хотите иметь круглые углы в jQuery, имеет смысл для меня, хотя некоторые, несомненно, будут утверждать обратное. Theres плагин, который я недавно использовал для проекта на работе здесь: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;
}

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

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

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

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

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

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

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

Границы Ruzee это единственное решение на основе 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 based, fluid round corner technique здесь:

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

обзор этого трюка заключается в том, что он использует вложенные DIVs и повторение фонового изображения и позиционирование. Для макетов фиксированной ширины (фиксированная ширина растягивающаяся высота) вам понадобятся три Дива и три изображения. Для компоновки fluid width (растягивающаяся ширина и высота) вам понадобится девять 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 широко поддерживается с радиусом границы, это будет официальным лучшим способом сделать закругленные углы.

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

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