Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 12 Границы Элементов


« Назад Далее »

CSS Свойства Границы

CSS свойства границы позволяют вам указывать стиль и цвет границы элемента.

Стиль Границы

Свойство border-style указывает, какой тип границы отображать.

Замечание Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!

Значения border-style

none: Отсутствие границы

dotted: Граница из точек

dashed: Пунктирная граница

solid: Сплошная граница

double: Двойная граница. Ширина двойной границы равна значению border-width

groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color

ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color

inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color

outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color

Пример: Установка стиля границы


Ширина Границы

Свойство border-width используется, чтобы установить ширину границы.

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), or thick (толстая).

Замечание: Свойство "border-width" не работает, если используется в одиночку. Используйте сначала свойство "border-style", чтобы установить границы.

Пример

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Цвет Границы

Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:

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

Также вы можете установить цвет границы в "transparent".

Замечание: Свойство "border-color" не работает, если используется в одиночку. Укажите сначала свойство "border-style", чтобы установить границы.

Пример

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Граница - Индивидуальное оформление сторон

В CSS можно указать различные границы для разных сторон:

Пример

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Пример выше можно переделать, используя одно свойство:

Пример

border-style:dotted solid;

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Свойство border-style может иметь от одного до четырех значений.

  • border-style:dotted solid double dashed;
    • верхняя граница - из точек
    • правая граница - сплошная
    • нижняя граница - двойная
    • левая граница - пунктирная

  • border-style:dotted solid double;
    • верхняя граница - из точек
    • правая и левая границы - сплошные
    • нижняя граница - двойная

  • border-style:dotted solid;
    • верхняя и нижняя границы - из точек
    • правая и левая границы - сплошные

  • border-style:dotted;
    • все четыре границы - из точек

Свойство border-style используется в примере выше. Однако, это также работает и со свойствами border-width и border-color.


Граница - Стенографическое (сокращенное) свойство

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

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством.

Стенографическое свойство для свойств границы - "border":

Пример

border:5px solid red;

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

При использовании свойства border, порядок значений таков:

  • border-width
  • border-style
  • border-color

Можно пропустить некоторые значения (хотя, свойство border-style все-таки необходимо), главное - сохранять указанный порядок.


Примеры

Еще примеры

Все свойства верхней границы в одном объявлении
Этот пример демонстрирует стенографическое свойство для установки всех свойств верхней границы в одном объявлении.

Установка стиля нижней границы
Этот пример демонстрирует, как установить стиль нижней границы.

Установка ширины левой границы
Этот пример демонстрирует, как установить ширину левой границы.

Установка цвета четырех границ
Этот пример демонстрирует, как установить цвет четырех границ. Они могут иметь от одного до четырех цветов.

Установка цвета правой границы
Этот пример демонстрирует, как установить цвет правой границы.


Все CSS Свойства Границы

СвойствоОписание
borderУстанавливает все свойства границы в одном объявлении
border-bottomУстанавливает все свойства нижней границы в одном объявлении
border-bottom-colorУстанавливает цвет нижней границы
border-bottom-styleУстанавливает стиль нижней границы
border-bottom-widthУстанавливает ширину нижней границы
border-colorУстанавливает цвет четырех границ
border-leftУстанавливает все свойства левой границы в одном объявлении
border-left-colorУстанавливает цвет левой границы
border-left-styleУстанавливает стиль левой границы
border-left-widthУстанавливает ширину левой границы
border-rightУстанавливает все свойства правой границы в одном объявлении
border-right-colorУстанавливает цвет правой границы
border-right-styleУстанавливает стиль правой границы
border-right-widthУстанавливает ширину правой границы
border-styleУстанавливает стиль четырех границ
border-topУстанавливает все свойства верхней границы в одном объявлении
border-top-colorУстанавливает цвет верхней границы
border-top-styleУстанавливает стиль верхней границы
border-top-widthУстанавливает ширину верхней границы
border-widthУстанавливает ширину четырех границ




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru