Створення закруглених кутів за допомогою CSS [закрито]

Як можна створити закруглені кути за допомогою CSS?

З моменту введення CSS3, найкращим способом додавання закруглених кутів за допомогою CSS є використання border-radiusвластивості. Ви можете прочитати специфікацію ресурсу або отримати корисну інформацію про впровадження MDN :

Якщо ви використовуєте веб-переглядач, який не реалізує border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), то в наведених нижче посиланнях викладено безліч різних підходів. Знайдіть той, який відповідає вашому сайту та стилю кодування, і перейдіть до нього.

1. CSS Design: Створення власних куточків та меж
2. CSS "Закруглені кути"
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, і на веб-браузері відповідно.

Отже, що відбувається з 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 про поведінку

Завдяки підтримці 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;
}

Як уже згадувалося, у нього є свої межі (фон за закругленою коробкою повинен бути рівним, інакше кути не збігаються з фоном), але він дуже добре працює для будь-якого іншого.

Оновлено: Покращено реалізацію за допомогою спрайтового аркуша.

Мені особисто подобається це рішення найкраще, його .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 <9.

Ось 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;
}

Зображення всього 18 пікселів у ширину, усі 4 кути упаковані разом. Схоже на коло.

Примітка: друга внутрішня обгортка вам не потрібна, але мені подобається використовувати поле на внутрішній обгортці, щоб поля в абзацах і заголовках все ще підтримували краху поля. Ви також можете пропустити jquery і просто помістити внутрішню обгортку в html.

Як свідчення того, наскільки складним є закруглення кутів, навіть Yahoo відлякує їх (див. Першу точку)! Зрозуміло, в цій статті вони говорять лише про закруглені кути на 1 піксель, але цікаво бачити, що навіть компанія, яка має їхній досвід, зробила висновок, що вони надто сильно болять, щоб змусити їх працювати більшу частину часу.

Якщо ваш дизайн може вижити без них, це найпростіше рішення.

Звичайно, якщо це фіксована ширина, це дуже просто за допомогою CSS, і зовсім не образливий або трудомісткий. Це коли вам потрібно, щоб масштабувати в обох напрямках, речі стають зламаними. Деякі з рішень мають приголомшливу кількість дівок, розміщених один на одного, щоб це сталося.

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

Ruzee Borders - це єдине рішення, яке базується на Javascript із закругленим кутом, яке я знайшов, що працює у всіх основних браузерах (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), а також єдиний, який працює, коли обидва округлі елементи І батьківський елемент містять фонове зображення. Це також робить межі, тіні та сяючі.

Новий варіант RUZEE.ShadedBorder - це ще один варіант, але йому не вистачає підтримки для отримання інформації про стилі від CSS.

Якщо ви хочете скористатися рішенням про межі радіусу, є цей дивовижний веб-сайт для створення css, який змусить його працювати для safari / chrome / FF.

У будь-якому випадку, я думаю, що ваш дизайн не повинен залежати від закругленого кута, і якщо ви подивитесь на Twitter, вони просто скажуть F **** користувачам IE та опер. Закруглені кути приємно мати, і я особисто добре зберігаю це для класних користувачів, які не використовують IE :).

Зараз, звичайно, це не думка клієнтів. Ось посилання: http://border-radius.com/

На додаток до вищевказаних htc-рішень, ось ще одне рішення та приклади досягнення округлих кутів у IE .

Не існує "найкращого" способу; є способи, які працюють для вас, і способи, які не роблять. Сказавши це, я опублікував статтю про створення на основі CSS + зображень, флюїдної техніки круглих кутів тут:

Коробка з круглими кутами за допомогою 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, і після перевірки, схоже, він не працює. Крім того, ще одна хитрість полягає в тому, щоб зробити внутрішню частину кожного кутового зображення прозорою, щоб вона не блокувала текст, який знаходиться біля кута. Зовнішня частина не повинна бути прозорою, щоб вона могла прикрити межу не округлої ділянки.

Крім того, коли CSS3 буде широко підтримуватися радіусом межі, це буде найкращим офіційним способом створення закруглених кутів.

Не використовуйте CSS, про jQuery вже згадували кілька разів. Якщо вам потрібен повний контроль над фоном і межею елементів, спробуйте jQuery Background Canvas Plugin . Він розміщує елемент HTML5 Canvas на задньому плані і дозволяє йо малювати всі фони або рамки, які ви хочете. Закруглені кути, градієнти тощо.

Opera ще не підтримує радіус кордону (мабуть, це буде у версії після версії 10). Тим часом ви можете використовувати CSS для встановлення SVG фону для створення подібного ефекту .