Back to site

CSS: межы радыусу і-Жнівень мяжы радыусу

Адной з найбольш востра чаканы ўласцівасці CSS3 гэта мяжа радыусу. Вэб-дызайнеры больш не будзе звяртацца да складаным структурам табліцы, выкарыстоўваючы заказ графікі куце ці ў тым ліку тайнай файлы JavaScript для таго, каб вырабляць канструкцыі з закругленымі кутамі.

Хоць Internet Explorer не падтрымлівае шматлікія (або) знаходзяцца на прасунутай CSS ўласцівасці, вы можаце пачаць працу з Firefox і любы з сям'і "Mozilla" браўзэраў. Ад Apple WebKit вэб-браўзэр на рухавічку таксама падтрымлівае закругленымі кутамі робячы іх даступнымі ў Safari і Chrome браўзэры, iPhone і іншых прылад, якія працуюць пад WebKit.

Вызначэнне і сінтаксіс мяжы радыусу

Як і ў многіх CSS уласцівасцяў, звязаных з поля, водступы і межы, Ёсць чатыры індывідуальных уласцівасцяў - па адным на кожным куце акна элемента - і адзін скарочаны уласнасці. Кожны з атрыбутаў куце будзе прымаць адзін або два значэння. Межы радыусу уласнасці будзе прымаць да двух значэнняў у браўзэрах WebKit і да васьмі зараз у Firefox 3.5.

Вось CSS і браўзэр канкрэтных атрыбутаў ў пытанне:

CSS3 (Opera браўзэр) Mozilla эквівалентныя WebKit эквівалентныя
мяжы правым верхнім радыусу -Жнівень мяжы радыусу-topright -WebKit-мяжы правым верхнім радыусу
мяжы ніжняга правага радыусу -Жнівень мяжы радыусу-BottomRight -WebKit-мяжы ніжняга правага радыусу
мяжы ніжняга левага радыусу -Жнівень мяжы радыусу-bottomleft -WebKit-мяжы ніжняга левага радыусу
мяжы верхняга левага радыусу -Жнівень мяжы радыусу-TopLeft -WebKit-мяжы верхняга левага радыусу
мяжы радыусу -Жнівень мяжы радыусу -WebKit мяжы радыусу

У гэты час CSS3 ўласцівасці вышэй не працуюць у Internet Explorer. Версіі "Mozilla" Аднак працаваць добра ў Firefox і Mozilla іншых браўзэраў, заснаваных і прынцыпаў "WebKit ў Safari і Chrome.

Кожны з індывідуальных уласцівасцяў CSS3 куце прыняць адну або дзве даўжыні значэння (як правіла, "пікселяў" або "іх 'неадназначнасьць). Калі адно значэнне пастаўляецца тое, што становіцца радыус закруглены кут. Калі два значэння пастаўляюцца тады яны становяцца гарызантальных і вертыкальных радыусаў для эліптычных куце.

Сінтаксіс Mozilla Firefox да 3,5 падтрымліваецца толькі круглая (у адрозненне ад эліптычнай) кутоў і дадання другога значэння прывядзе да стандартных квадратным куце.

Межы радыусу уласнасці ў WebKit прымае адно ці два значэння і выкарыстоўвае іх для стылю ўсіх чатырох кутах рашэнняў добры сіметрычную форму. Новы сінтаксіс Firefox дазваляе вызначыць чатыры круглыя ??або эліптычныя кутах. Слэш быў уведзены, каб асобныя гарызантальныя і вертыкальныя наладкі даўжыні.

Прыклады выкарыстання-Жнівень мяжы радыусу

У наступных прыкладах будзе працаваць толькі калі вы выкарыстоўваеце Firefox або іншы браўзэр Mozilla, які падтрымлівае-Жнівень мяжы радыусу ўласцівасцямі.

Прыклад 1
-moz-border-radius: 1em;
Прыклад 2
-moz-border-radius-topright: 2em; -moz-border-radius-topleft: 2em;
Прыклад 3
-moz-border-radius: 2em 0;
Прыклад 4
-moz-border-radius: 3em 1em;

Mozilla ўласцівасці, якія выкарыстоўваюцца тут, не адпавядаюць стандартным (адсюль-Жнівень-прэфікс) і да Firefox 3.5 падтрымліваецца толькі круглыя ??куты. У новых версіях Firefox эліптычнай куты таксама магчыма.

Як некаторыя людзі паказалі гэтыя ўласцівасці могуць быць выкарыстаны не толькі для "скрынкі", але і для многіх іншых аб'ектаў у тым ліку HTML элементаў формы.

Для тых з вас усё яшчэ бачым прамыя куты, вось здымак з Firefox паказаны круглявыя куты эфект:

Ёсць шэраг складаных рашэнняў JavaScript, якія дазваляюць мяжы радыусу і іншых CSS3 ўласцівасці варта разглядаць у Internet Explorer і іншых браўзэраў - але накладныя выдаткі на самай справе не апраўдаць вынікі.

Падтрымка-WebKit мяжы радыуса ў Safari (WebKit)

У апошніх версіях Safari зараз падтрымліваюць-WebKit мяжы радыусу. Раней толькі "начныя зборкі", якое змяшчаецца гэтую функцыянальнасць ў оперы сінтаксіс для вуглоў жа, як у Safari, але паводзіны мяжы радыуса з двума значэннямі, што матчы з Firefox, як відаць у прыкладзе # 7 ніжэй:

Прыклад 5
-webkit-border-radius: 1em;
Прыклад 6
-webkit-border-top-right-radius: 24px; -webkit-border-top-left-radius: 24px;
Прыклад 7
-webkit-border-radius: 24px 0;
Прыклад 8
-webkit-border-radius: 36px 12px;
Прыклад 9
-webkit-border-top-right-radius: 50px 30px; -webkit-border-bottom-right-radius: 50px 30px;

Для тых з вас усё яшчэ бачым прамыя куты, ніжэй вы можаце знайсці asnapshot з WebKit паказаны круглявыя куты эфект. Адзначым, у прыватнасці змены ў сінтаксісе і эфекту праходжання двух значэнняў да WebKit мяжы радыуса ў параўнанні з-Жнівень мяжы радыусу прыкладзе вышэй.

WebKit таксама мае абмежаваную падтрымку для іншых CSS3 ўласцівасці мяжы, такія як: некалькі стала; мяжы фонавых малюнкаў, а таксама розныя прасунутыя селектары (:: выбраць, напрыклад) робіць яго выдатнай платформай для выпрабаванні перспектыўных распрацоўнікаў. Заставайцеся з Safari блог Surfin 'звязаныя ніжэй апошняй захапляльныя падзеі.

Падтрымка ў іншых браўзэрах

Опера, а зараз Safari (Mac), будзе падтрымліваць мяжы радыусу ўласцівасці без прэфікса. Internet Explorer, па меншай меры да версіі 8, не мае падтрымкі закругленымі кутамі Уласцівасці CSS.

Іншыя спецыяльныя эфекты

WebKit, Firefox і Опера зараз падтрымлівае шэраг іншых CSS3 асаблівасці, у тым ліку наступных простых эфектаў і пераўтварэнняў. На шчасце, у адрозненне ад закругленымі кутамі, для ценяў і пераўтворыць там, падобна, пагадненне аб агульны сінтаксіс.

-WebKit-Box-цень

Цень Прыклад
-webkit-border-radius: 36px 12px; -moz- border-radius: 36px / 12px; -webkit- box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

Відавочна Ёсць яшчэ некаторыя згладжвання праблем, але для вуглоў і далікатны крывыя гэта можа выглядаць даволі халаднавата.

Тады Існуюць розныя-WebKit-tranform варыянт, які можа быць выкарыстаны для стварэння ўсіх відаў дзіўныя і цудоўныя формы:

-WebKit-пераўтварэнні: паварот ()

Паварот Прыклад
-webkit-border-radius: 36px 12px; -moz- border-radius: 36px / 12px; -webkit- transform: rotate(-5deg);

-WebKit-пераўтварэнні: касой ()

Касыя Прыклад
-webkit-border-radius: 36px 12px; -moz- border-radius: 36px / 12px; -webkit- transform: skew(5deg,5deg);

Для браўзэра пад уздзеяннем вось скрыншот з Safari паказваюць ўплыў гэтых правілаў CSS. Ж эфекты цяпер можна ў Firefox, Opera і звязаных з браўзэрамі. Проста заменіце-WebKit з Жнівень-ці-O, за выключэннем мяжы радыусу і скрынка-цені, дзе Опера не выкарыстоўвае прэфікс.

Таксама ў Safari гэтыя і іншыя пераўтварэнні могуць быць рэалізаваны як анімацыю, выкарыстоўваючы толькі CSS эфекты выкліканыя навядзенні паказальніка мышы на элемент - не патрабуецца JavaScript.

Новы кароткі боку ўласцівасці

Наступны сінтаксіс ў цяперашні час працуе ў Firefox і оперы ў якім можна паказаць не толькі адпаведнасць эліптычныя куты, але і розныя эліптычныя куты ў адным скарочанае ўласцівасць.

Тут мы ўзнавілі два з прыкладаў WebKit вышэй, з выкарыстаннем новага сінтаксісу. Вы можаце бачыць, што індывідуальныя наладкі вугла працаваць дакладна так жа зараз у Firefox, як у WebKit, але і для кароткатэрміновых боку уласнасці вам неабходна ўключыць касую рысу:

Прыклад 8
-moz-border-radius: 36px / 12px; border-radius: 36px / 12px;
Прыклад 9
-moz-border-radius-topright: 50px 30px; -moz-border-radius-bottomright: 50px 30px;

І зараз страшна часткі. Выкарыстаньне кароткага боку уласнасці, усе знакавых перад касой рысай прымяняюцца да гарызантальнай радыусаў і ўсе значэння потым вертыкальная. У гэтым прыкладзе мы стварылі гібрыд двух папярэдніх прыкладах.

Прыклад 10
-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px

Тут вы можаце ўбачыць, што гэтыя скрынкі выглядаць у Firefox 3.5:

Асабіста я не вялікі прыхільнік гэтых змяненняў у спецыфікацыі. Гэта, здаецца, трохі зад-пакрыцця для групы Mozilla, каб яны маглі мець усе новыя магчымасці без шкоды для любога, выкарыстоўваючы свае старыя сінтаксісу. Калі / калі гэта прынята, хто выкарыстоўвае сінтаксіс WebKit (Прыклад 8), якія адпавядаюць арыгінальным рабочага праекта, раптам у выніку хісткі скрынкі (прыклад 4).

Артыкулы па Тэме

Спіс літаратуры

<CSS

Published (Last edited): Apr 16 , source: http://www.the-art-of-web.com/css/border-radius/