Имот css – « граница”, ви позволява да зададете дебелината, цвета и вида на линията около периметъра около елемента. Параметрите на това свойство могат да бъдат записани на един ред, разделени с интервали, и в произволен ред.

• - дебелина на линията един пиксел
• - плътна линия
• - Бял цвят
• - черен цвят
• - сив цвят

Плътна граница на елемент

прекъсната граница на елемента

Граница на пунктиран елемент

Двойна линия на границата на елемента

Собственост на отделни участъци от границата

Депресирана гофрирана рамка в обем

Изпъкнала гофрирана рамка в обем

Обемна вдлъбната рамка

Обемна изпъкнала рамка

Уроци / CSS /

Урок 7

Почти всеки сайт използва свойство, което създава рамка около елемент. Необходим е или за бутони, или за блокове с текст. За да създаде граница, елемент в CSS има две свойства: граница и контур. Нека ги разгледаме.

граница

Това свойство е необходимо за задаване на рамка около елемента, указва неговата граница в уеб документа, ширината на рамката се взема предвид при позиционирането на елемента. Има 3 стойности - цвят, дебелина и тип рамка.

Синтаксисът за свойството border е както следва:

граница: Ширина Тип Цвят;
Можете също така да изберете различен ред за посочване на стойностите на свойствата, но основното е чрез интервал.

Дебелината (ширината) на рамката трябва да бъде посочена в пиксели (px) или проценти (%).
Цветът може да бъде зададен или в RGB формат(Червено Зелено Синьо) или в HTML HEX код.

По-долу са ВИДОВЕ ЛИНИИс техните имена:

Как да задам граници за елемент? Правим го по следния начин:

#блокиране(
border:3px solid #0085ss; /* задайте линията да бъде 3px дебела синя */
}

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

граница отгоре- горна рамка
граница-отдолу- долна рамка
граница-ляво- рамка отляво;
граница-дясна- рамка отдясно;

Блокиране (
border-right: 3px плътен #0085cc;
граница-отдолу: 2px пунктирана #0085cc;
}

Ако искаш премахване на рамкиелемент в CSS, след това напишете в границата на свойството - няма

празен(
граница: няма /* елемент с празен клас няма да има рамка */
}

контур

Outline е свойство, което е необходимо за задаване на външната граница на елемент.

Има две разлики от границата:
Първо, линията, посочена в контура, НЯМА да повлияе на позицията на самия блок, неговата ширина и височина.
Второ, няма възможност за инсталиране на рамка от определена страна.
Синтаксисът е същият като границата.

контур: 2px пунктиран #0085cc; /* рамка 2 px пунктирана в синьо */
За контур, както и за рамка, можете да премахнете границите, като напишете none:

Благодаря за вниманието!

Предишна статия
Урок 6

Граници на елемента.

Подложки и полета в CSS. Какво е поле и подложка? Следваща статия
Урок 8. Как да задам цвета на текста и фона на елемент в CSS?

Коментари към статията (vk.com)

граница

Поддръжка на браузър

Описание

Свойството CSS ви позволява едновременно да зададете ширината, стила и цвета на границата на блока. Границата на блока е проста линия/рамка, която обгражда блока от всички страни. Трябва да се има предвид, че при добавяне на рамка това ще повлияе на общия размер на блока.

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

Забележка: За да зададете граници само на определени страни на елемент, използвайте следните свойства: border-top, border-bottom, border-left, border-right.

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

Свойство на CSS: граница

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

Синтаксис

граница: ширина на границата стил на границата цвят на границата|наследяване;

Стойности на имотите

Пример

Тук има някакъв текст.

Резултат този примерв прозореца на браузъра:

Как да зададете цвета, стила и размера на рамката в полетата.

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

граничен атрибут

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

В CSS можем да контролираме ширината на рамката (граница) с border-widthи за да бъдем по-точни, можем да контролираме дебелината на всяка страна поотделно:
border-top-width- дебелина на горната граница
border-right-width- дебелина на десния бордюр
border-bottom-width- дебелина на долната граница
border-left-width- дебелина на лявата граница
Но може и да се съкрати:
P(ширина на границата:горе вдясно долу вляво;)(горе вдясно долу вляво).
Ширината на границата може да бъде зададена:
числа DIV(border-width:5px), от нула до безкрайност, т.е. положителен.
тънък- тънка граница, DIV(border-width:thin)
среден- средна граница, DIV(border-width:medium)
дебел- дебела граница, DIV(border-width:thick)
С числата е ясно, но с тези стойности всичко зависи от браузъра, но все пак тънък<= medium <= thick .

Можем също да контролираме цвета на рамката с цвят на границатаили по-точно цвета на всяка страна:
цвят на горната границацвят на горната граница
цвят на дясната границацвят на дясната граница;
цвят на границата-отдолуцвят на долната граница;
border-left-colorцвят на границата от лявата страна.
Стойността на цвета е зададена като за цвят, т.е. един от 16 цвята: аква, черно, синьо, фуксия, сиво, зелено, лайм, кестеняво, морско, маслинено, лилаво, червено, сребристо, синьозелено, бяло или жълто, можете също да зададете цветове: цвят:#000000, цвят:#AF0 , цвят:rgb(255,0,0)или цвят: rgb (100%, 0%, 0%).
Без значение каква цветова схема изберете, браузърите пак ще я преведат цвят:rgb(255,0,0). Например цвят: лайм = цвят:#00ff00 = цвят:#0F0 = цвят: rgb (0%, 100%, 0%), но това няма значение за браузъра цвят:rgb(0,255,0), т.е. ще изчисли тази стойност.

Ако дебелината и цветът на рамката също могат да се контролират от HTML, тогава стилът ( граничен стил) само CSS!!!
Стилът може да се контролира от всяка страна поотделно:
граница-отгоре стилстил на горната граница;
border-right-styleстил на дясната граница;
стил на границата отдолустил на долната граница;
стил на границата влявостил на рамка от лявата страна.
Сега помислете за стойностите на стиловете:
1)border-style:няма- Това е стойността по подразбиране, подобна на border-width:0.
2)border-style:hidden- Същото, с изключение на таблици (таблица), които ще разгледаме по-късно.
3)border-style: dotted- Рамка от точки.
4)border-style:dashed— Граница от пунктирана линия.
5)border-style:solid- Граница с плътна линия, т.е. като в HTML.
6)border-style:double- Граница от двойна плътна линия, тук се нуждаете от дебелина (ширина на границата) от поне 3 пиксела.
7)border-style:groove- Контурът изглежда като изрязан на платно.
8)border-style:ridge— Рамката изглежда сякаш стърчи от платното.
9)border-style: inset- Цялата кутия изглежда като пресована в платното.
10)border-style:начало- Обратното на предишния.
Някои браузъри може да игнорират стойностите с пунктир, пунктир, двойно, жлеб, ръб, вмъкване и начало и да ги извеждат като плътни, т.е. обикновена граница.

Всичко това, разбира се, е вярно, но всички примери по-горе са само принципът на работа, а не механизъм.
Правило собственост границапредполага (граница: размер стил цвят;), това правило се изпълнява, ако всичките три стойности присъстват и само в този ред, например H1 (контура: 5px двойно червено;), но може да има изключения, ако тези стойности се предоставят от езици за маркиране, например за таблица ТАБЛИЦА (контур: 2 пиксела), т.е. е дадена само една стойност.

За да управлявате не целия бордюр, а всяка част поотделно, има правила:
(горна рамка: размер стил цвят;)Контрол на горния бордюр;
(граница-дясна: размер стил цвят;)Контрол на бордюра отдясно;
(граница-отдолу: размер стил цвят;)Долен контрол на бордюра;
(граница-ляво: размер стил цвят ;)Контрол на бордюра отляво.
Тези правила могат да се използват поотделно или всички заедно.

Изключение е това правило:
H1(
рамка: 4px плътно зелено;
}
Работата е там, че в CSS последното правило има най-висок приоритет, в този случай свойството border съдържа border-left и следователно правилото border-left ще бъде игнорирано, точно така:
H1(
рамка: 4px плътно зелено;
border-left: 2px двойно червено;
}
Първо определяме правилата за целия бордюр, а след това за отделни участъци.

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

css: граница. Граници на елемента.

CSS3 граници

CSS3 граници

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

В този урок ще научите за следните свойства на границата:

• граница-радиус
• кутия сянка
• граница-изображение

Поддръжка на браузър

Internet Explorer 9 поддържа някои от новите свойства на рамката.

Firefox изисква префикса -moz- за border-image.

Chrome и Safari изискват префикса -webkit- за border-image.

Opera изисква -o- за border-image.

Safari също изисква префикса -webkit- за box-shadow.

Opera поддържа нови свойства на границите.

CSS3 заоблени ъгли

Добавянето на заоблени ъгли в CSS2 беше трудно. Трябваше да използваме различни изображения за всеки ъгъл.

В CSS3 създаването на заоблени ъгли е лесно.

В CSS3 свойството border-radius се използва за създаване на заоблени ъгли:

Този блок има заоблени ъгли!

Сянка на CSS3 контейнер

В CSS3 свойството box-shadow се използва за добавяне на сянка към кутии:

CSS3 Border-Image

Със свойството CSS3 border-image можете да използвате изображение, за да създадете рамка:

Свойството border-image ви позволява да зададете рамка на изображение!

Оригиналното изображение, използвано за създаване на границата, е ваше:

Нови гранични свойства

граничен атрибут

граничен атрибут, етикет

HTML граници

Приемливо е да се използва рамка без стойности, тогава дебелината на рамката ще бъде равна на един пиксел. По подразбиране рамката се показва с 3D ефекти, но ако допълнително приложите атрибута на фона, рамката ще стане "плоска".

Освен това, ако атрибутът border има ненулева стойност, тогава браузърите също показват тънки граници около самите клетки. Показването на тези граници може да се контролира с помощта на атрибута rules.

Стойности

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

Стойност по подразбиране: 0.

Синтаксис

Задължителен атрибут: няма.

Пример за HTML: Прилагане на атрибута Border

Примерен резултат

Резултат. Прилагане на атрибута border.

Майкъл 2016-06-11 1 HTML и CSS 0

Как да направя двойна рамка в css?

Здравейте всички. Знаете ли как да направите двойна рамка в css? Ако не, моля, прочетете тази кратка бележка. Въпросът е, че не можете да направите това с обикновена граница, трябва да отидете в другата посока.

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

Двойна рамка със сянка

Като цяло, ако искате да проучите сянката в css по-подробно, тогава ви съветвам да прочетете по съответната тема. В тази статия няма да обяснявам подробно синтаксиса на свойствата, а просто ще ви покажа как да създадете двойна рамка. И така, ще създам обикновен блок, на който ще предпиша някои стилове. Блокът може да бъде всякакъв и с всякакво съдържание. В моя случай това е обикновен div, така че дори няма да покажа html кода. А ето и стиловете:

Div(
фон: #E0D8A3;
ширина: 180px
височина: 110px;
подложка: 12px
}

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

Кутия-сянка: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Ето как изглежда:

Както можете да видите, стана много хубаво. Има само 5 параметъра в box-shadow. Първото е хоризонталното отместване на сянката, второто е вертикалното отместване. Третият и четвъртият параметър са размазване и разтягане. Както можете да видите, ние изобщо не докосваме първите три. Нямаме нужда от размазване, защото имаме нужда от остра сянка. Както можете да видите, предписах четвъртия параметър - разтягане. Той определя колко сянката ще бъде по-голяма от елемента, към който е прикрепена.

По подразбиране всичко изглежда така - сянката е със същия размер като елемента и лежи ясно под него. Ако промените разтягането, тогава сянката започва да излиза извън елемента. Ето как можете да създадете граници, точно както свойството border. Е, с петия параметър, мисля, че всичко е ясно - това е цветът на сянката.

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

Минута на вашето внимание:Всички искаме да поставим нашите сайтове на надежден хостинг. Анализирах стотици хостове и намерих най-добрия - HostIQВ мрежата има стотици положителни отзиви за него, средната потребителска оценка е 4,8 от 5. Нека вашите сайтове са добри.

Описание

Универсалното свойство border ви позволява едновременно да зададете ширината, стила и цвета на рамката около даден елемент. Стойностите могат да вървят в произволен ред, разделени с интервал, браузърът ще определи коя отговаря на желаното свойство. За да зададете рамка само от определени страни на елемент, използвайте свойствата border-top, border-bottom, border-left, border-right.

Синтаксис

Стойности

Стойността на border-width определя ширината на границата. Осигурени са няколко стойности на стила на рамката, за да контролирате външния му вид. Техните имена и резултатът от действието са показани на фиг. един.

Фиг. 1. Стилове на рамки

border-color задава цвета на рамката, стойността може да бъде във всеки валиден CSS формат.

inherit наследява стойността на родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

В този пример се добавя двойна рамка около слоя. Резултатът е показан на фиг. 2.

Ориз. 2. Прилагане на свойството на границата

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

document.getElementById("elementID ").style.border

Браузъри

Internet Explorer до и включително версия 6 изобразява пунктирано като пунктирано с ширина на границата от 1px. При 2px и повече пунктираната стойност работи правилно. Този бъг е коригиран в IE7, но само за всички рамки от 1px. Ако една от границите на кутията е 2px или по-дебела, тогава пунктираната става пунктирана в IE7.

Internet Explorer до версия 7.0 не поддържа наследената стойност.

Стилът на рамката може леко да варира между браузърите, когато използвате стойностите groove, ridge, inset или outset.

Описание

Универсалното свойство border ви позволява едновременно да зададете ширината, стила и цвета на рамката около даден елемент. Стойностите могат да вървят в произволен ред, разделени с интервал, браузърът ще определи коя отговаря на желаното свойство. За да зададете рамка само от определени страни на елемент, използвайте свойствата border-top, border-bottom, border-left, border-right.

Синтаксис

Стойности

Стойността на border-width определя ширината на границата. Осигурени са няколко стойности на стила на рамката, за да контролирате външния му вид. Техните имена и резултатът от действието са показани на фиг. един.

Фиг. 1. Стилове на рамки

border-color задава цвета на рамката, стойността може да бъде във всеки валиден CSS формат.

inherit наследява стойността на родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

В този пример се добавя двойна рамка около слоя. Резултатът е показан на фиг. 2.

Ориз. 2. Прилагане на свойството на границата

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

document.getElementById("elementID ").style.border

Браузъри

Internet Explorer до и включително версия 6 изобразява пунктирано като пунктирано с ширина на границата от 1px. При 2px и повече пунктираната стойност работи правилно. Този бъг е коригиран в IE7, но само за всички рамки от 1px. Ако една от границите на кутията е 2px или по-дебела, тогава пунктираната става пунктирана в IE7.

Internet Explorer до версия 7.0 не поддържа наследената стойност.

Стилът на рамката може леко да варира между браузърите, когато използвате стойностите groove, ridge, inset или outset.

Общото свойство border се използва за контролиране на границата на елемент. Това свойство ви позволява да зададете ширината, стила и цвета на рамката на елемент в една декларация.

Тези три свойства (ширина, стил и цвят на рамката) могат да бъдат зададени в една декларация. Ето един пример:

Можете да зададете стил на граница само от едната страна на елемент. За да направите това, използвайте свойствата border-top (горна граница), border-right (дясна граница), border-bottom (долна граница), border-left (лява граница).

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

Помислете за използване на CSS, за да създадете форма като тази:

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

• border-style - стилът на границата.
• border-width - ширината на границата.
• border-color - цветът на рамката.

Нека разгледаме всяка от стойностите поотделно.

Имотът в стил граница. Стил на границата.

Свойството border-style задава стила на границата. В CSS, за разлика от HTML, рамката на елемент може да бъде нещо повече от плътна. Валидни стойности за стила на границата са:

1. none - без рамка (по подразбиране).
2. solid - плътна граница.
3. двойна - двойна граница.
4. прекъсната - пунктирана граница.
5. пунктиран - рамка, съставена от поредица от точки.
6. рид - граница "гребен".
7. groove - граница "жлеб".
8. inset - вмъкната граница.
9. начало - екструдиран бордюр.

Примери как изглеждат.

без граница (няма)

плътна граница (плътна)

двойна рамка (двойна)

пунктирана граница (пунктирана)

пунктирана граница (прекъсната)

граница на бразда (жлеб)

граница на билото

вдлъбната граница (вмъкване)

екструдирана граница (начало)

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

Разделителен блок с черна граница и стил на ръб.

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

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

Една стойност (плътно) - стилът на границата е зададен за всички страни на блока.

Две стойности (твърдо двойно) - първата стойност задава стила за горната и долната страна, втората за страната.

Три стойности (плътна двойна точка) - първата стойност за горната страна, втората за страните, третата за долната.

Четири стойности (плътни двойно пунктирани пунктирани) - всяка стойност за едната страна по посока на часовниковата стрелка отгоре.

Свойството border-width. Дебелина на границата.

Свойството border-width се използва за задаване на ширината на границата на елемент. Дебелината на рамката може да бъде зададена във всяка абсолютна мерна единица, като например пиксели.

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

Примерен код:

Има също стойности на ключови думи за свойството border-width. Има общо три:

• тънка - тънка граница;
• среден - средна дебелина;
• дебел - дебел бордюр;

Дебелина на границата: тънка.

Дебелина на границата: средна.

Дебелина на границата: дебела.

Свойството border-color. Цвят на границата.

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

• Шестнадесетичният запис (#ff00aa) на цвета.
• RGB форматът е rgb(255,12,110). RGBA формат за CSS3.
• HSL и HSLA формати за CSS3.
• Името на цвета, например черно (черно). За пълен списък с имена на цветове вижте таблицата с имена на цветове в CSS.

Свойството border-color също може да има една до четири стойности и ги третира подобно на предишните свойства.

Една стойност (червена).

Две стойности (червено черно).

Три стойности (червено черно жълто).

Четири стойности (червено черно жълто синьо).

Сега нека се върнем към задачата, изразена по-горе, и да нарисуваме фигура:

Ето кода, който рисува такава форма, само че е по-голяма:

Задаване на стойности за страните отделно

Както бе споменато по-горе, можете да посочите стойности на свойство на границата само за едната страна на блок. За тези цели има свойства:

• border-top (горна граница)
• border-right (дясна граница)
• border-bottom (долна граница)
• border-left (лява граница)

Позволете ми да ви напомня, че за всички свойства са посочени три стойности (дебелина, стил и цвят) в произволен ред. Но има свойства, които ви позволяват да зададете дебелината, цвета и стила за всяка страна поотделно. Написването на тези свойства произтича от горното.

Опции за горна граница (border-top).

• border-top-color - задава цвета на горната граница на елемент.
• border-top-width - задава ширината на горната граница на елемент.
• border-top-style - задава стила на горната граница на елемента.

Опции за дясна граница (border-right).

• border-right-color - задава цвета на дясната граница на елемента.
• border-right-width - задава ширината на дясната граница на елемента.
• border-right-style - задава стила на дясната граница на елемента.

Опции за долна граница (border-bottom).

• border-bottom-color - задава цвета на долната граница на елемент.
• border-bottom-width - задава ширината на долната граница на елемент.
• border-bottom-style - задава стила на долната граница на елемент.

Опции за лява граница (border-left).

• border-left-color - задава цвета на лявата граница на елемента.
• border-left-width - задава ширината на лявата граница на елемента.
• border-left-style - задава стила на лявата граница на елемента.

Пример за използване на тези свойства:

Свойството border-radius. Заобляне на ъглите на границата.

Свойството border-radius е за заобляне на ъглите на границите на елемент. Това свойство е въведено в CSS3 и работи правилно във всички съвременни браузъри с изключение на Internet Explorer 8 (и по-стари версии).

Стойностите могат да бъдат всяко число, използвано в CSS.

свойство border-radius: 15px.

Ако блоковата рамка не е зададена, тогава закръгляването се извършва с фона. Ето пример за закръгляване на блок без рамка, но с цвят на фона:

свойство border-radius: 15px.

Има свойства за заобляне на всеки отделен ъгъл на елемент. Този пример използва всички от тях:

border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

свойство border-radius: 15px.

Въпреки че този код може да бъде написан в една декларация: border-radius : 15px 0 15px 0 . Факт е, че за свойството border-radius можете да зададете от една до четири стойности. Таблицата по-долу обобщава правилата, които управляват такива декларации.

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

Малко практика

Начертайте лимон с помощта на CSS.

Ето кода за такъв блок:

Марж: 0 авто; /* Центрирайте блока */ width: 200px; височина: 200px; фон: #F5F240; рамка: 1px плътен #F0D900; радиус на границата: 10px 150px 30px 150px;

Вече сме начертали фигурата:

Сега нека оставим триъгълник от него:

Кодът на триъгълника е:

Марж: 0 авто; /* Центрирайте блока */ padding: 0px; ширина: 0px височина: 0; рамка: 30px плътно бяло; цвят на долната граница: червен;