Создание закругленных углов с помощью CSS
Как я могу создать закругленные углы, используя CSS?
21 ответ
Поскольку CSS3 был представлен, лучший способ добавить закругленные углы с помощью CSS - это использовать border-radius имущество. Вы можете прочитать спецификацию свойства или получить полезную информацию о реализации в MDN:
Если вы используете браузер, который не реализует border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), затем ссылки ниже детализируют целый ряд различных подходов. Найдите тот, который подходит вашему сайту и стилю кодирования, и используйте его.
Я смотрел на это в начале создания Stack Overflow и не мог найти никакого метода создания закругленных углов, который не оставлял бы у меня ощущения, будто я просто шел по канализации.
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).
С поддержкой 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;
}
Как уже упоминалось, у него есть свои пределы (фон за округленной рамкой должен быть ровным, иначе углы не будут совпадать с фоном), но он работает очень хорошо для всего остального.
Обновлено: улучшено внедрение с помощью спрайт-листа.
Вот решение 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.
В 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.
Лично мне больше всего нравится это решение, его.htc позволяет IE отображать кривые границы.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Как указание на то, как сложно заставить работать закругленные углы, даже Yahoo их не одобряет (см. Первую маркированную точку)! Конечно, в этой статье они говорят только о закругленных углах в 1 пиксель, но интересно видеть, что даже компания со своим опытом пришла к выводу, что им слишком тяжело, чтобы заставить их работать большую часть времени.
Если ваш дизайн может выжить без них, это самое простое решение.
Ruzee Borders - это единственное решение на основе Javascript с сглаживанием закругленных углов, которое я обнаружил, которое работает во всех основных браузерах (Firefox 2/3, Chrome, Safari 3, IE6/7/8), а также единственное, которое работает, когда и округленный элемент И родительский элемент содержат фоновое изображение. Это также делает границы, тени и светящиеся.
Более новый RUZEE.ShadedBorder - еще одна опция, но в ней отсутствует поддержка для получения информации о стиле из CSS.
Конечно, если это фиксированная ширина, это очень легко, используя CSS, и совсем не обидно и не кропотливо. Когда вам нужно масштабировать в обоих направлениях, все становится нестабильным. Некоторые из решений имеют потрясающее количество элементов div, накладываемых друг на друга, чтобы это произошло.
Мое решение состоит в том, чтобы диктовать дизайнеру, что если они хотят использовать закругленные углы (на данный момент), это должна быть фиксированная ширина. Дизайнеры любят закругленные углы (как и я), поэтому я считаю, что это разумный компромисс.
Если вы хотите использовать решение 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 для создания аналогичного эффекта.