ПредишенСледващото

CSS имоти Гранична

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

Тази граница елемент, има канал, който в ширина и 15px зелено.

стила на границата

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

Допускат се следните стойности:

  • пунктирана - Определя пунктирана рамка,
  • пунктирана - Определя пунктирана граница
  • твърд - Определя плътна граница
  • двойно - Определя двойна граница
  • бразда - Определя велпапе граница 3D. Ефектът зависи от цвета на границата
  • хребет - Дефинира оребрена граница 3D. Ефектът зависи от цвета на границата
  • добавям - Определя граничния 3D лента. Ефектът зависи от цвета на границата
  • начало - Определя 3D граница начало. Ефектът зависи от цвета на границата
  • няма - не определя границите
  • скрити - определя скрити в чужбина

граница стил имот може да има от една до четири стойности (над горната граница, дясната граница, долната граница и лявата граница).

Точкуван граница.

А пунктирана граница.

Двойно граница.

А жлеб граница. Ефектът зависи от стойността на граничен цвят.

А билото граница. Ефектът зависи от стойността на граничен цвят.

Един граничен добавям. Ефектът зависи от стойността на граничен цвят.

Едно начало граница. Ефектът зависи от стойността на граничен цвят.

Скрит граница.

Забележка: Никой от другите CSS граничните свойства. описани по-долу. Той няма да има никакъв ефект. Ако имотът граничния стил не е настроен!

ширина кутия

гранично-ширина собственост определя широчината на четирите граници.

Ширината може да бъде зададено с определен размер (пиксели, pt, см, ги. И т.н.). или се използва един от трите предварително зададени стойности: фин, средно или дебели.

гранично-ширина имот може да има от една до четири стойности (над горната граница, дясната граница, долната граница и лявата граница).

p.one граница в стил: твърда;
гранично-ширина: 5px;
>

p.two граница в стил: твърда;
гранично-ширина: средна;
>

p.three граница в стил: твърда;
гранично-ширина: 10px 2px 4px 20px;
>

Цветът на границата

граничен цвят имот се използва. да зададете цвят от четирите граници.

Цвят може да бъде определена от:

  • име - посочите име на цвят, като "червените"
  • Hex - определя шестнадесетична стойност, например "# ff0000"
  • RGB - посочите стойност RGB, като "RGB (255,0,0)"
  • прозрачен

граничен цвят имот може да има от една до четири стойности (над горната граница, дясната граница, долната граница и лявата граница).

Ако граничен цвят не е инсталирана, тя наследява цвета на елемента.

p.one граница в стил: твърда;
гранично-цвят: червен;
>

p.two граница в стил: твърда;
гранично-цвят: зелен;
>

p.three граница в стил: твърда;
гранично-цвят: червен зелен син жълт;
>

Гранична - Отделните страни

От горните примери те видях, че можете да посочите друг граничен за всяка страна.

В CSS, има и свойства за определяне на границите на всеки от (горе, дясно, отдолу и от ляво на дясно):

р-граница най-стил: осеян;
гранично-дясно в стил: твърда;
гранично-отдолу-стил: осеян;
гранично-лявата стил: твърда;
>

Примерът по-горе води до същия резултат като този:

р граница в стил: осеян вещество;
>

Така че тук е как става това:

Ако имотът граничния стил разполага с четири стойности:

  • гранично-стил. пунктираната пунктираната твърдо вещество двойно;
    • Горната граница на пунктираната линия
    • дясна граница е твърда
    • Долната граница на два пъти
    • лявата граница на прекъснатата

Ако имотът граничния стил има три стойности:

  • гранично-стил. пунктирана твърдо двойно;
    • Горната граница на пунктираната линия
    • наляво и надясно по границите са твърди
    • Долната граница на два пъти

Ако имотът граничния стил има две значения:

  • гранично-стил. пунктирана твърдо вещество;
    • горни и долни граници са осеяни
    • наляво и надясно по границите са твърди

Ако имотът граничния стил има същата стойност:

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

Гранична - съкратено имот

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

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

граничен имот е обща собственост на физическото лице за следните гранични свойства:

  • гранично-широчина
  • граница стил (по желание)
  • граничен цвят

р граница: 5px твърд червен;
>

Още примери

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

Задава стила на долната граница
Този пример показва как да се определи стила на долната граница.

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

Задайте цвета на четирите граници
Този пример показва как да настроите цвета на четирите граници. То може да има от една до четири цвята.

Задайте цвета на дясната граница
Този пример показва как да настроите цвета на дясната граница.

Проверете сами с упражненията!

Всички CSS свойства граница

Свързани статии

Подкрепете проекта - споделете линка, благодаря!