CSS: рамка. Граници на елемента

Задава радиуса на заобляне на ъглите на рамката. Ако рамката не е зададена, тогава закръгляването се извършва и с фона.

кратка информация

Наименования

	Описание	Пример
<тип>	Показва типа на стойността.	<размер>
A && B	Стойностите трябва да бъдат изведени в посочения ред.	<размер> && <цвет>
A \| б	Показва, че трябва да изберете само една стойност от предложените (A или B).	нормално \| малки букви
А \|\| б	Всяка стойност може да се използва самостоятелно или заедно с други в произволен ред.	ширина \|\| броя
	Групови ценности.	[ изрязване \|\| кръст]
*	Повторете нула или повече пъти.	[,<время>]*
+	Повторете един или повече пъти.	<число>+
?	Посоченият тип, дума или група не е задължителен.	вмъкване?
(А, Б)	Повторете поне A, но не повече от B пъти.	<радиус>{1,4}
#	Повторете един или повече пъти, разделени със запетаи.	<время>#

Стойности

Допуска се използването на една, две, три или четири стойности, като се изброяват разделени с интервал (Таблица 1). Също така е приемливо да напишете две стойности, разделени с наклонена черта (/). Стойностите са числа във всеки формат, приемлив за CSS. Когато използвате проценти, броят е спрямо ширината на блока.

В случай на посочване на два параметъра чрез наклонена черта, първият параметър определя радиуса хоризонтално, а вторият – вертикално (елипсовидни ъгли). На фиг. Фигура 1 показва разликата между правилния заоблен ъгъл и елипсовиден ъгъл.

Ориз. 1. Радиус на заобляне за създаване различни видовеъгли

пясъчник

Мечо Пух винаги нямаше нищо против малко освежаване, особено в единадесет сутринта, защото по това време закуската отдавна беше приключила, а обядът все още не беше започнал. И, разбира се, страшно се зарадва, като видя, че Заекът вади чаши и чинии.

div (фон: #e4efc7; граница: 1px плътен #333; подложка: 10px; border-radius: 0;)

Пример

граница-радиус

радиус на границата: 50px 0 0 50px;

радиус на границата: 40px 10px;

радиус на границата: 13em/3em;

радиус на границата: 13em 0.5em/1em 0.5em;

радиус на границата: 8px;

Резултат този примерпоказано на фиг. 2.

Ориз. 2. Радиуси на закръгляне

Обектен модел

Предмет.style.borderRadius

Забележка

Chrome преди версия 4.0, Safari преди версия 5.0 и Android преди версия 2.1 използват свойството -webkit-border-radius.

Firefox преди версия 4.0 използва свойството -moz-border-radius.

Спецификация

Всяка спецификация преминава през няколко етапа на одобрение.

Препоръка - Спецификацията е одобрена от W3C и се препоръчва като стандарт.
Препоръка за кандидат ( Възможна препоръка ) - групата, отговорна за стандарта, е доволна, че той изпълнява целите си, но се нуждае от помощ от общността за разработка, за да внедри стандарта.
Предложена препоръка Предложена препоръка) - на този етап документът се предава на Консултативния съвет на W3C за окончателно одобрение.
Работна чернова - По-зряла версия на чернова, която е била обсъдена и изменена за преглед от общността.
Черновата на редактора ( Редакционна чернова) - чернова версия на стандарта след промени, направени от редакторите на проекта.
Чернова ( Проект на спецификация) - първата чернова на стандарта.

Свойството border-radius не се прилага към елементи на таблица, когато имат споделени или отделни граници."> border-collapse е collapse.

Забележка:Както при всяко съкратено свойство, индивидуалните подсвойства не могат да наследяват, като например в border-radius:0 0 inherit inherit , което частично би заменило съществуващите дефиниции. Вместо това трябва да се използват индивидуалните свойства на дългата ръка.

Синтаксис

/* Синтаксисът на първия радиус позволява една до четири стойности*//* Радиусът е зададен за всичките 4 страни */ border-radius: 10px; /* горе-ляво-и-долу-дясно | горе-дясно-и-долу-ляво*/ border-radius: 10px 5%; /* горе вляво | горе-дясно-и-долу-ляво | долу вдясно*/ border-radius: 2px 4px 2px; /* горе вляво | горе в дясно | долу вдясно | долу-ляво*/ border-radius: 1px 0 3px 4px; /* Синтаксисът на втория радиус позволява една до четири стойности*/ /* (първи стойности на радиуса) / радиус*/ радиус на границата: 10px 5% / 20px; /* (първи стойности на радиуса) / горе-ляво-и-долу-дясно | горе-дясно-и-долу-ляво*/ радиус на границата: 10px 5% / 20px 30px; /* (първи стойности на радиуса) / горе вляво | горе-дясно-и-долу-ляво | долу вдясно*/ border-radius: 10px 5px 2em / 20px 25px 30%; /* (първи стойности на радиуса) / горе вляво | горе в дясно | долу вдясно | долу-ляво*/ border-radius: 10px 5% / 20px 25em 30px 35em; /* Глобални стойности */ border-radius: inherit; border-radius: начален; радиус на границата: не е зададен;

Свойството border-radius е посочено като:

един, два, три или четири CSS типа данни представляват стойност на разстоянието. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или CSS типът данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> стойности. Това се използва за задаване на единичен радиус за ъглите.
последвано по желание от "/" и едно, две, три или четири или Стойности. Това се използва за задаване на допълнителен радиус, така че можете да имате елиптични ъгли.

Стойности

радиус		Дали тип данни CSS представлява стойност на разстояние. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или тип CSS данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> обозначаващ радиус, който да се използва за граница във всеки ъгъл на границата. Използва се само в синтаксиса с една стойност.
горе-ляво-и-долу-дясно		Дали тип данни CSS представлява стойност на разстояние. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или тип CSS данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> обозначаващ радиус, който да се използва за граница в горния ляв и долния десен ъгъл на кутията на елемента. Използва се само в синтаксиса с две стойности.
горе-дясно-и-долу-ляво		Дали тип данни CSS представлява стойност на разстояние. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или тип CSS данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> обозначаващ радиус, който да се използва за граница в горния десен и долния ляв ъгъл на кутията на елемента. Използва се само в синтаксиса с две и три стойности.
горе вляво		Дали тип данни CSS представлява стойност на разстояние. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или тип CSS данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> обозначаващ радиус, който да се използва за граница в горния ляв ъгъл на кутията на елемента. Използва се само в синтаксиса с три и четири стойности.
горе в дясно		Дали тип данни CSS представлява стойност на разстояние. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или тип CSS данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> обозначаващ радиус, който да се използва за граница в горния десен ъгъл на полето на елемента. Използва се само в синтаксиса с четири стойности.
долу вдясно		Дали тип данни CSS представлява стойност на разстояние. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или тип CSS данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> обозначаващ радиус, който да се използва за граница в долния десен ъгъл на кутията на елемента. Използва се само в синтаксиса с три и четири стойности.
долу-ляво		Дали тип данни CSS представлява стойност на разстояние. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> или тип CSS данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> обозначаващ радиус, който да се използва за граница в долния ляв ъгъл на полето на елемента. Използва се само в синтаксиса с четири стойности.

CSS типът данни представлява стойност на разстоянието. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> Обозначава размера на радиуса на окръжността или на голямата и малката полуос на елипсата, като използва стойности за дължина. Отрицателните стойности са невалидни. Типът данни CSS представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> Означава размера на радиуса на окръжността или голямата полуос и полумалката ос на елипсата, използвайки процентни стойности. Процентите за хоризонталната ос се отнасят за ширината на кутията; процентите за вертикалната ос се отнасят за височината на кутията. Отрицателните стойности са невалидни.

Радиус на границата: 1em/5em; /* ... е еквивалентно на: */ border-top-left-radius: 1em 5em; граница-горе-дясно-радиус: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; радиус на границата: 4px 3px 6px / 2px 4px; /* ... е еквивалентно на: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;

Формален синтаксис

1,4 / 1,4

където
= !}

Примери

граница: плътна 10px; /* границата ще се извие в "D" */ border-radius: 10px 40px 40px 10px; граница: жлеб 1em червен; радиус на границата: 2em; фон: злато; граница: златно било; радиус на границата: 13em/3em; граница: няма; радиус на границата: 40px 10px; граница: няма; граница-радиус: 50%; рамка: пунктирана; ширина на границата: 10px 4px; радиус на границата: 10px 40px; граница: прекъсната; ширина на границата: 2px 4px; радиус на границата: 40px;

Мостри на живо

Спецификации

Спецификация	Статус	Коментирайте
CSS модул за фонове и граници, ниво 3 Дефиницията на "радиус на границата" в тази спецификация.	Препоръка за кандидат	Първоначално определение

Първоначална стойност
Отнася се за	всички елементи; но потребителските агенти не са задължени да се прилагат към елементи на таблица и вградена таблица, когато имат споделени или отделни граници."> border-collapse е collapse. Поведението на вътрешните елементи на таблицата е недефинирано за момента. То се отнася и за ::first - писмо.
Наследени	не
Проценти	обърнете се към съответното измерение на рамката
Медия	визуален
Изчислена стойност	като всяко от свойствата на стенографията: border-bottom-left-radius : два абсолютни CSS типа данни представляват стойност на разстоянието. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> s или CSS типът данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> с border-bottom-right-radius : два абсолютни CSS типа данни представляват стойност на разстоянието. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> s или CSS типът данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> с border-top-left-radius : два абсолютни CSS типа данни представляват стойност на разстоянието. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> s или CSS типът данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> с border-top-right-radius : два абсолютни CSS типа данни представляват стойност на разстоянието. Дължините могат да се използват в множество свойства на CSS, като ширина, височина, поле, подложка, ширина на границата, размер на шрифта и сянка на текста."> s или CSS типът данни представлява процентна стойност. Често се използва за дефиниране на размер като относителен към родителския обект на елемент. Много свойства могат да използват проценти, като ширина, височина, марж, подложка и размер на шрифта.> с
Тип анимация	като всяко от свойствата на стенографията: border-top-left-radius : CSS тип данни се интерполират като реални числа с плаваща запетая.">length , CSS тип данни се интерполират като реални числа с плаваща запетая.">percentage или calc(); border-top-right-radius : CSS тип данни се интерполират като реални числа с плаваща запетая.">length , CSS тип данни се интерполират като реални числа с плаваща запетая.">percentage или calc(); border-bottom-right-radius : CSS тип данни се интерполират като реални числа с плаваща запетая.">length , CSS тип данни се интерполират като реални числа с плаваща запетая.">percentage или calc(); border-bottom-left-radius : CSS тип данни се интерполират като реални числа с плаваща запетая.">length , CSS тип данни се интерполират като реални числа с плаваща запетая.">percentage или calc();
Каноничен ред	уникалния недвусмислен ред, определен от формалната граматика

Съвместимост с браузър

Таблицата за съвместимост в тази страница е генерирана от структурирани данни. Ако искате да допринесете за данните, моля, разгледайте https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.

Актуализирайте данните за съвместимост в GitHub

	работен плот						Подвижен
	Chrome	Ръб, край	Firefox	Internet Explorer	Опера	Safari	Уеб изглед на Android	Chrome за Android	Edge Mobile	Firefox за Android	Opera за Android	Safari на iOS	Интернет на Samsung
Основна поддръжка	Пълна поддръжка на Chrome 4 Бележки Пълна поддръжка 4 Бележки Бележки	Edge Пълна поддръжка 12 Пълна поддръжка 12 Пълна поддръжка 12 С префикс С префикс Внедрено с префикса на доставчика: -webkit-	Firefox Пълна поддръжка 4 Бележки Пълна поддръжка 4 Бележки Бележки Преди Firefox 50 стиловете на границите на заоблени ъгли (с border-radius) винаги се изобразяваха така, сякаш стилът на границата беше плътен. Това е поправено във Firefox 50. Бележки За да отговаря на стандарта CSS3, Firefox 4 променя обработката на стойностите, за да съответства на спецификацията. Можете да посочите елипса като граница на елемент с произволен размер с border-radius: 50%; . Firefox 4 също прави заоблени ъгли клипове на съдържание и изображения, ако : visible не е зададено. Няма поддръжка 1 - 12 С префикс С префикс Внедрено с префикса на доставчика: -moz-	IE Пълна поддръжка 9	Opera Пълна поддръжка 10.5 Бележки Пълна поддръжка 10.5 Бележки Бележки В Opera преди версия 11.60, заменените елементи с border-radius ще нямамзаоблени ъгли.	Пълна поддръжка на Safari 5 Бележки Пълна поддръжка 5 Бележки Бележки Текущите версии на Chrome и Safari игнорират включен радиус на границата	WebView Android Пълна поддръжка 2 С префикс Пълна поддръжка 2 С префикс С префикс Внедрено с префикса на доставчика: -webkit-		Edge Mobile Пълна поддръжка Да Пълна поддръжка Да Пълна поддръжка Да С префикс С префикс Внедрено с префикса на доставчика: -webkit-	Firefox Android Пълна поддръжка Да Бележки Пълна поддръжка Да Бележки Бележки Преди Firefox 50 стиловете на границите на заоблени ъгли (с border-radius) винаги се изобразяваха така, сякаш стилът на границата беше плътен. Това е поправено във Firefox 50.	Opera Android Пълна поддръжка	Safari iOS Пълна поддръжка Да
Елипсовидни граници	Пълна поддръжка на Chrome Да Бележки Пълна поддръжка Да Бележки Бележки Преди Chrome 4 наклонената черта / нотацията не се поддържа. Ако са посочени две стойности, се изчертава елипсовидна граница на четирите ъгъла. -webkit-border-radius: 40px 10px; е еквивалентен на border-radius: 40px/10px; .	Edge Пълна поддръжка 12	Firefox Пълна поддръжка 3.5	IE Пълна поддръжка Да	Opera Пълна поддръжка Да	Safari Пълна поддръжка Да Бележки Пълна поддръжка Да Бележки Бележки Преди Safari 4.1 наклонената черта / нотацията не се поддържа. Ако са посочени две стойности, се изчертава елипсовидна граница на четирите ъгъла. -webkit-border-radius: 40px 10px; е еквивалентен на border-radius: 40px/10px; .	WebView Android?	Chrome Android Пълна поддръжка Да				Safari iOS?	Samsung Internet Android Пълна поддръжка Да
4 стойности за 4 ъгъла	Пълна поддръжка на Chrome 4	Edge Пълна поддръжка 12	Пълна поддръжка на Firefox Да	IE Пълна поддръжка Да	Opera Пълна поддръжка Да	Пълна поддръжка на Safari 5	WebView Android?	Chrome Android Пълна поддръжка Да	Edge Mobile Пълна поддръжка Да	Firefox Android Пълна поддръжка Да	Opera Android Няма поддръжка No	Safari iOS?	Samsung Internet Android Пълна поддръжка Да
Проценти	Пълна поддръжка на Chrome Да Бележки Пълна поддръжка Да Бележки Бележки Стойностите не се поддържат в по-стари версии на Chrome и Safari (поправено е през септември 2010 г.).	Edge Пълна поддръжка 12	Firefox

Легенда

Пълна подкрепаПълна подкрепа Няма поддръжкаНяма поддръжка Неизвестна съвместимостНеизвестна съвместимост Вижте бележките за изпълнение. Вижте бележките за изпълнение. Изисква префикс на доставчик или друго име за използване.

Вижте също

CSS свойства, свързани с радиуса на границата:

В предишния урок научихме как да зададем рамка за елемент. Разгледахме и свойства като цвят на границата и стил на границата, с които можете да персонализирате цвета и стила на рамката. Всички наши рамки обаче излязоха с прави ъгли. Сега ще ви кажем как да направите заоблени ъглив CSS за граници.

Как да закръглите ъгли: CSS3 свойство border-radius

Заоблянето на ъглите в CSS може да се направи за всеки елемент на HTML страница. За да направите това, трябва да приложите свойството border-radius към него със съответната стойност. Най-често стойността се посочва в пиксели, но могат да се използват и други единици, като em или процент (във последния случай изчислението е спрямо ширината на блока).

Ефект от този имотще се забележи само ако стилизираният елемент има цветен фон и/или рамка. Например:

BorderElement (цвят на фона: #EEDDFF; рамка: 6px плътен #7922CC; радиус на границата: 25px; )

Стилът, описан по-горе, ще даде следния резултат върху елемента

размер 200х200 пиксела:

Можете също да направите заоблени ръбовесамо за горните или долните ъгли на елемента или дайте на всеки ъгъл различен радиус на заобляне - много място за въображение! Пример:

BorderElement (цвят на фона: #EEDDFF; рамка: 6px плътен #7922CC; радиус на границата: 25px;)

Но това не е всичко: вместо прости кръгли ъгли, можете да зададете елипсовидно заобляне. За да направите това, ще трябва да посочите две стойности, разделени с наклонена черта (за хоризонталната и вертикалната полуос на елипсата). Нека дадем пример за блок от 150x450 пиксела:

BorderElement (цвят на фона: #EEDDFF; рамка: 6px плътен #7922CC; радиус на границата: 280px/100px; )

Можете да смесвате стойностите (т.е. да използвате както правилни, така и елипсовидни закръглени в един и същи стил), а също така можете да добавите личен стил за всеки ъгъл, като използвате подходящите свойства:

border-top-left-radius - за горния ляв ъгъл;
border-top-right-radius - за горния десен ъгъл;
border-bottom-left-radius - за долния ляв ъгъл;
border-bottom-right-radius - за долния десен ъгъл.

Принципът на заобляне на ъглите

Изображението по-долу показва как се изчислява закръгляването на ъглите в CSS. Така че, ако за ъгъла е посочена една стойност - например 20px - това означава, че закръгляването ще се извърши по окръжност с радиус 20 пиксела. В случай, че са посочени две стойности, разделени с наклонена черта, например 30px/20px, ъглите ще бъдат закръглени по елипса. Първата стойност в случая е дължината на хоризонталната полуос на елипсата - 30px, а втората стойност е дължината на вертикалната полуос - 20px:

Свойството CSS border-radius се поддържа от всички модерни версиибраузъри.

Сигурен съм, че вече сте запознати със свойството border css. Научавате ли нещо ново, което не сте знаели преди? css граница? Е, не само ще научите, но и ще видите няколко нови неща, които никога не сте знаели преди!

Не само CSS3 може да се използва за създаване на заоблени ъгли, но и чист CSS код може да се използва за създаване сложни форми. Преди можехте да използвате фоново изображение, за да създадете вид на заоблени ъгли. Благодарение на новите техники за използване на рамка, можем да направим това с чист CSS код.

Основи на използването на css border

Вероятно вече сте запознати със стандартното използване на свойството border:

Граница: 1px плътно черно;

Кодът по-горе ще изведе рамка от 1px, която ще бъде черна. Просто и лесно. Можете също така да разширите малко синтаксиса:

Ширина на границата: дебела; стил на границата: плътен; цвят на рамката: черен;

Като допълнение можете да използвате конкретни стойности за свойството border-width, три ключови думи: тънък, среден, дебел.

Но използването на разширения синтаксис не винаги е практично. Нека да разгледаме пример, когато трябва да промените цвета на блокова рамка, когато задържите курсора на мишката. В този случай използването на съкратения синтаксис е много по-лесно:

Кутия ( граница: 1px плътно червено; ) .box:hover ( рамка: 1px плътно зелено; )

По-елегантен и по-прост начин да направите това е:

Кутия (рамка: 1px плътно червено;) .box:hover (цвят на границата: зелено;)

Както можете да видите, усъвършенстваната техника е полезна и когато променяме само някои свойства: ширина, стил, цвят и други.

Граница-радиус

граница-радиус- Това е "златното" свойство на CSS3 - първото, най-разпространено свойство, станало практично и полезно. С изключение на IE8 и версиите по-долу, всички браузъри показват заоблени ъгли, използвайки това.

Въпреки това е необходимо да се използват специални префикси за Webkit и Mozilla, за да бъде стилът правилен.

Webkit-border-radius: 10px; -moz-border-radius: 10px; радиус на границата: 10px;

В наши дни можем да премахнем специалните префикси и да използваме стандартната форма за радиус на границата.

Друга привилегия е, че можем да използваме специални значенияза всяка страна на блока:

Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

В кода по-горе, задаването на border-top-right-radius и border-bottom-left-radius на "null" може да постигне някои невероятни форми. Въпреки че елементът може да наследи някои свойства, които ще трябва да бъдат нулирани.

Подобно на margin и padding, можем да компресираме синтаксиса:

/* горе вляво, горе вдясно, долу вдясно, долу вляво */ border-radius: 20px 0 30px 0;

Като пример за използване на свойството border-radius, ще ви покажа „лимон“, който дизайнерите често използват, когато проектират уебсайтове:

Лимон (ширина: 200px; височина: 200px; фон: #F5F240; граница: 1px плътна #F0D900; радиус на границата: 10px 150px 30px 150px; )

Нека надхвърлим основите

Много дизайнери имат всички познания в областта css свойстваграница, там свършва. Но има някои други страхотни неща, които можете да използвате, за да създавате невероятни неща!

Сложни css гранични структури

Има много техники за използване на дизайни сложни структуриграница. Например, нека да разгледаме следното...

Граничен стил

Винаги използваме най-много известни свойстваплътни, прекъснати и пунктирани. Но има няколко други свойства на стила на границата: жлеб и ръб.

Граница: 20px жлеб #e3e3e3;

Или в разширен синтаксис:

Цвят на рамката: #e3e3e3; border-width: 20px; стил на границата: жлеб;

Въпреки че тези свойства са полезни, те не са основата за създаване на сложни рамки.

Контур

Най-популярната техника за създаване на двойна рамка е използването на свойството контур.

Кутия ( граница: 5px плътен #292929; контур: 5px плътен #e3e3e3; )

Този метод работи чудесно, въпреки че ни ограничава само до два кадъра. Понякога трябва да създадете граница с градиент, която се състои от много слоеве... как тогава?

Псевдоелементи

Когато техниката на контура не е достатъчна, алтернативно средство за защита е използването на псевдо елементите: преди и: след. С които можете да добавите допълнителни рамки към елемент:

Box ( width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; ) /* Създайте две кутии с еднаква ширина на контейнера */ .box:after, .box:before ( съдържание: ""; позиция: абсолютна; горе: 0; ляво: 0; долу: 0; дясно: 0; ) .box:after ( граница: 5px плътно червено; контур: 5px плътно жълто; ) .box:before ( граница : 10px плътно синьо; )

Не изглежда много елегантно, но поне, работи. Малко е трудно да разберете последователността на цветовете в рамките... но можете да го разберете.

Кутия-сянка

Интересен "детски начин" за създаване на подобен ефект е използването на свойството box-shadow на CSS3:

Кутия (рамка: 5px плътно червено; сянка на кутията: 0 0 0 5px зелено, 0 0 0 10px жълто, 0 0 0 15px оранжево; )

В този случай бяхме по-умни и използвахме специално свойство box-shadow. Като променим параметрите x, y, blur на нула, можем да използваме различни цветове, за да създадем множество рамки.

Но има проблем: в по-старите браузъри, които не разбират свойството box-shadow, ще се вижда само една 5px червена рамка.

"Помня! Дизайнът на сайта трябва да изглежда междубраузърен, тоест еднакъв във всички браузъри. Включително по-стари версии."

Смяна на ъгли

В допълнение към използваната проста стойност за радиус на границата, можем да посочим две отделни - като ги разделим с /, ние посочваме хоризонтален и вертикален радиус.

Например:

Радиус на границата: 50px / 100px; /* хоризонтален радиус, вертикален радиус */

... това е еквивалентно на:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Тази техника е подходяща за създаване на уникални блокови форми. Например, ето как да създадете ефект на опакована хартия:

Кутия (ширина: 200px; височина: 200px; фон: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; )

CSS форми, използващи рамка

Тази техника показва как можете да създавате CSS формуляри, докато използвате елементи с нулеви измерениявисочина и ширина. изненадан? Нека да разгледаме един пример...

За следващите няколко примера ще използваме следното маркиране:

...и следния основен стил:

Кутия (ширина: 200px; височина: 200px; фон: черен;)

Повечето общ пример използвайки CSSформи - създаване на течаща стрелка. Тайната на тази стрелка се крие в създаването на рамка с различен цвят за всяка страна. След това задайте атрибутите за ширина и височина на 0.

Да възложим на div блокклас стрелка:

Стрелка (ширина: 0; височина: 0; рамка отгоре: 100px плътно червено; граница отдясно: 100px плътно зелено; граница отдолу: 100px плътно синьо; граница отляво: 100px плътно жълто; )

За да демонстрираме, първо използваме разширения синтаксис. След това можем да премахнем допълнителния код, използвайки съкратения синтаксис:

Стрелка (ширина: 0; височина: 0; рамка: 100px плътна; цвят на границата: червено зелено синьо жълто; )

Интересно, нали? Сега ще зададем прозрачни цветове от всички страни, с изключение на синята страна.

Стрелка (ширина: 0; височина: 0; граница: 100px плътна; border-bottom-color: blue; )

Страхотно се получи! Но това противоречи семантично оформление, създайте .arrow div, само за да добавите стрелка към страницата. За тази цел можем да използваме псевдоелементи, което ще направим сега.

Създайте балонче за реч

За да създадем Speech Bubble, имаме нужда от малко парче чист CSS код и един блок div.

Здрасти!

Балонче за реч (позиция: относителна; цвят на фона: #292929; ширина: 200px; височина: 150px; височина на реда: 150px; /* вертикално център */ цвят: бял; подравняване на текст: център; )

Speech-bubble:after ( съдържание: ""; )

На този етап ще създадем стрелката, която направихме преди, ще я добавим към елемента и всичко, което остава, е да я позиционираме:

Speech-bubble:after (съдържание: ""; позиция: абсолютна; ширина: 0; височина: 0; рамка: 10px плътна; цвят на границата: червено зелено синьо жълто; )

Ако искаме стрелката да сочи надолу, ще трябва да настроим всички граници на прозрачни, с изключение на горната.

Speech-bubble:after (съдържание: ""; позиция: абсолютна; ширина: 0; височина: 0; граница: 10px плътна; border-top-color: red; )

Когато създаваме това CSS форма, не можем конкретно да посочим размера на стрелката. Вместо това можем да зададем свойството border-width, което ще присвои размер на стрелката. Ще зададем и позицията на стрелката отдолу в средата. Съответно за това използваме стойностите отгоре и отляво.

Speech-bubble:after (съдържание: ""; позиция: абсолютна; ширина: 0; височина: 0; рамка: 15px плътна; border-top-color: red; top: 100%; ляво: 50%; )

Освен това просто трябва да му дадем цвят, същият като на блока. Не забравяйте, че когато позиционирате, трябва да вземете предвид размера на другите граници, които са невидими (15px). Също така ще дадем на блока закръгляване в ъглите.

Speech-bubble ( /* … други стилове */ border-radius: 10px; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top -цвят: #292929; отгоре: 100%; отляво: 50%; поле отляво: -15px; /* регулирайте ширината на рамката */ )

Не е лошо, а? Използвайки няколко CSS класа и гранични трикове, можете да създадете такова нещо.

/* Използване на мехурчета за реч: Приложете клас .speech-bubble и .speech-bubble-DIRECTION, както е показано по-долу

Здрасти

*/ .speech-bubble (позиция: относителна; цвят на фона: #292929; ширина: 200px; височина: 150px; височина на реда: 150px; /* вертикално център */ цвят: бял; подравняване на текст: център; граница- радиус: 10px; font-family: sans-serif; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; ) /* Позиционирайте стрелката */ .speech-bubble-top:after ( border-bottom-color: #292929; ляво: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after ( border-left-color : #292929; отляво: 100%; отгоре: 50%; margin-top: -15px; ) .speech-bubble-bottom:after ( border-top-color: #292929; отгоре: 100%; отляво: 50%; margin-left: -15px; ) .speech-bubble-left:after ( border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; )

Бонус! Вертикално центриране в блока

За един ред текст можете да използвате line-height. Но ако имате два или повече реда текст... Най-доброто решениеще зададе свойството display на table и ще постави целия текст в абзац. Ето как изглежда в html маркиране:

Speech-bubble ( /* други стилове */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )

Ние не се ограничаваме до триъгълници. CSS може да показва различни форми - дори сърца и знак за биологична опасност.

Биологична опасност (ширина: 0; височина: 0; граница: 60px плътна; радиус на границата: 50%; цвят на границата-отгоре: черен; цвят-на-долната граница: черен; цвят-наляво-на границата: жълто; граница-вдясно- цвят: жълт ;)

Заключение

CSS свойството радиус на границата се използва за заобляне на ъглите на елемент. Това е съкратена версия на свойствата: border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.

Може да приема от една до четири стойности или осем стойности, разделени с наклонена черта "/", с една до четири стойности от всяка страна на наклонената черта.

Ако наклонената черта не е зададена, свойството може да приема една, две, три или четири стойности.

border-radius: [стойност на радиуса] [стойност на радиуса]? [стойност на радиуса]? [стойност на радиуса]?; // "?" тази стойност не е задължителна

Ако са посочени четири стойности, те определят радиусите на всеки от четирите ъгъла. Тоест, първата стойност ще показва радиуса x и y на горния ляв ъгъл, така че ще бъде кръгла крива. Втората стойност определя радиусите за горния десен ъгъл, третата определя радиусите за долния десен ъгъл, а четвъртата определя радиусите за долния ляв ъгъл;
Ако са дадени три стойности, първата задава радиуса на горния ляв ъгъл, втората задава радиуса на горния десен и долния ляв ъгъл, а третата задава радиуса на долния десен ъгъл;
Ако са дадени две стойности CSS таблица border radius , първият дефинира радиусите на горния ляв и долния десен ъгъл, а вторият дефинира радиусите на горния десен и долния ляв ъгъл;
Ако е посочена една стойност, тя задава равни радиуси на четирите ъгли.

Например:

радиус на границата: 1em 3em 2em;

еквивалентен:

граница-горе-ляво-радиус: 1em; border-top-right-radius: 3em; border-bottom-right-radius: 2em; border-bottom-left-radius: 3em;

Във всеки от горните случаи, когато не се използва наклонена черта, четирите ъгъла на елемента ще бъдат заоблени и тяхната кривина ще бъде идеален кръг:

Два равни радиуса за всеки ъгъл създават кръгла крива. Всеки ъгъл в този пример има хоризонтален и вертикален радиус от 50 пиксела.

Ако е посочена наклонена черта, свойството може да приеме до осем стойности – една до четири стойности от всяка страна на наклонената черта.

Стойностите, посочени преди наклонената черта, определят хоризонталния радиус на ъглите. Стойностите, посочени след наклонената черта, определят вертикалния радиус на съответните ъгли.

Например:

радиус на границата: 2em 1em 4em / 0.5em 3em;

еквивалентен:

граница-горе-ляво-радиус: 2em 0.5em; граница-горе-дясно-радиус: 1em 3em; border-bottom-right-radius: 4em 0.5em; граница-долу-ляво-радиус: 1em 3em;

В този случай на прилагане на радиус на границата CSS, ъглите на елемента ще бъдат заоблени и тяхната кривина ще бъде елипсовидна:

Два неравни радиуса за всеки ъгъл дават елиптична кривина. Всеки ъгъл в този пример има хоризонтален радиус от 100 пиксела и вертикален радиус от 50 пиксела.

Обща информация и бележки

Ако елементът използва фонов цвят или изображение, фонът също ще бъде подрязан с посочения радиус на границата:

Фоновото изображение на елемента се изрязва, за да пасне на зададения радиус на границата.

Но понякога цветът на фона на даден елемент може да премине през границата, когато е заоблен. За да коригирате това, можете да използвате свойството background-clip и да го зададете на padding-box.

Елемент ( border-radius: 30px; background-clip: padding-box; )

Ако даден елемент има граници на изображението, те не се изрязват от кривата на заобления ъгъл.

Съдържанието на даден елемент може да се простира отвъд неговите граници в ъгли, които са закръглени, освен ако елементът няма зададена стойност за подплънка, достатъчна да избута съдържанието навътре:

Съдържанието на елемент може да се простира отвъд заоблената граница, ако елементът няма зададена подложка.

Този CSS пример за радиус на границата на moz добавя подложка, за да не се простира съдържанието извън заоблените ъгли на границата. Имайте предвид, че самата граница не се показва, но фонът все още ще има заоблени ъгли.

Елемент (фон: черен; цвят: бял; радиус на границата: 1em; подложка: 1em;)

Освен това зоната извън извитата граница не получава указателни събития, свързани с този елемент.

Освен това ъгловите криви не трябва да се пресичат: когато сумата от радиусите на всеки две съседни граници надвишава размера на блока, браузърите трябва пропорционално да намалят стойностите на всички използвани радиуси на границите, така че нито един от тях да не се припокрива.

Процентите са идеални за създаване на кръгли или елипсовидни форми. Използването на радиус на границата CSS: 50% води до напълно кръгъл елемент, чиято височина и ширина са равни:

Елемент със същата височина, ширина и радиус на границата от 50%.

Ако височината и ширината на елемента не са равни, ще получим елипсовидна форма:

Елемент с радиус на границата от 50%, чиято височина и ширина не са равни.

Официален синтаксис

Синтаксис:

радиус на границата: [<длина> | <проценты>] {1,4} {1,4}]?

Първоначална стойност: 0 0 0 0, той определя началната стойност на всяко от отделните свойства.

Отнася се за: всички елементи. Но не е необходимо браузърите непременно да го прилагат към таблица и елементи на вградена таблица, когато свойството border-collapse е настроено на collapse. Поведението на вътрешните елементи на таблицата в момента е недефинирано.

Анимиран: Всяко от пълните свойства е анимирано като две стойности за дължина, процентни стойности или стойности на calc(). Когато и двете стойности са дължини, те се интерполират като дължини. Когато и двете стойности са проценти, те се интерполират като процент. В противен случай и двете стойности се преобразуват от свойството calc().

Стойности

Неофициален CSS синтаксис на радиуса на границата на webkit:

border-radius: [стойност на радиуса] [стойност на радиуса]? [стойност на радиуса]? [стойност на радиуса]?;

border-radius: [горен ляв хоризонтален радиус] [горен десен хоризонтален радиус]? [долния десен хоризонтален радиус]? [долния ляв хоризонтален радиус]? / [горен ляв вертикален радиус] [горен десен вертикален радиус]? [долния десен вертикален радиус]? [долния ляв вертикален радиус]?

И в двата случая въпросителният знак (?) показва, че стойността не е задължителна. Ако стойността е пропусната, браузърът я определя, както е описано по-горе.

Всеки радиус може да бъде зададен като процент или стойност на дължина. Процентът за хоризонталния радиус се отнася за ширината на блока, докато процентът за вертикалния радиус се отнася за височината на блока. Отрицателните стойности не са разрешени.

граница-радиус: 50%; радиус на границата: 30px 20px 40px; радиус на границата: 1em 2em; радиус на границата: 3em / 2em 4em; радиус на границата: 1em 2em 1em 3em / 2em 3em;

Демо версия