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

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

<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, вмешивающимся в другой материал. Это очень похоже на то, что Моно отправленный, но не содержит IE 6, определенные взломы, и после проверки, кажется, не работают вообще. Кроме того, другой прием должен заставить внутреннюю часть каждого угла отобразить прозрачный, таким образом, это не блокирует текст, который является около угла. Внешняя часть не должна быть прозрачной, таким образом, она может покрыть границу неокругленного отделения

кроме того, как только CSS3 широко поддерживается с радиусом границы, который будет официальным лучшим способом сделать скругленные углы.

Границы Ruzee являются единственным основанным на JavaScript сглаженным решением для скругленного угла, я нашел, что работы во всех главных браузерах (Firefox 2/3, Chrome, Safari 3, IE6/7/8), и ТАКЖЕ единственный, который работает, когда и округленный элемент И родительский элемент содержат фоновое изображение. Это также делает границы, тени и свечение.

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

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

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

Вот HTML/js/css решение, которое я недавно сделал. Существует погрешность округления на 1 пкс с абсолютным расположением в 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;
}

Изображение всего 18 пкс шириной и имеет все 4 угла, упакованные вместе. Похож на круг.

Примечание: Вам не нужна вторая внутренняя обертка, но мне нравится использовать поле на внутренней обертке так, чтобы поля в абзацах и заголовках все еще поддержали граничный коллапс. Можно также пропустить jQuery и просто поместить внутреннюю обертку в HTML.

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

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

Всегда существует 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;
}

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

Обновленный: Улучшенный реализация при помощи листа спрайта.

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

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

Как сказанный Brajeshwar: Используя 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).

поведение файл

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

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

CSS3 действительно наконец определяет

border-radius:

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

Тем временем, это - взломы полностью вниз. Я интересуюсь слушанием, что думают другие люди, самый чистый способ сделать это через IE7, FF2/3, Safari3 и Opera 9.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.

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

Как сказано в других ответах,

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

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

I personally like this solution the best, its an .htc to allow IE to render curved borders.

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

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

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

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

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

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

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

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