Атрибуты: Параметры рамки блочного элемента.

  Атрибуты стилей рамки устанавливают параметры оформления границ (рамок) полей элементов блочных тегов на Web-странице.

  Стили ширины линий рамки.
  Атрибуты:
  
  • border-left-width - Устанавливает ширину линии левой стороны рамки.
  • border-right-width - Устанавливает ширину линии правой стороны рамки.
  • border-top-width - Устанавливает ширину линии верхней стороны рамки.
  • border-bottom-width - Устанавливает ширину линии нижней стороны рамки.
  • border-width - Устанавливает ширину линий всех линий рамки.

Формат:

  1. border-left-width
     |border-right-width
     |border-top-width
     |border-bottom-width:
      thin
      |medium
      |thick
      |Размер
  2. border-width:
      thin|medium|thick|Размер
      [thin|medium|thick|Размер
      [thin|medium|thick|Размер
      [thin|medium|thick|Размер]]

Значения:

  •  thin - Нормализованная тонкая линия.
  •  medium - Нормализованная средняя линия.
      Это нормальное значение ширины, оно действует по умолчанию, если ширины стороны не указана в случае использования общего атрибута стилей рамки border.
  •  thick - Нормализованная толстая линия.
  • Размер - Линейная величина с единицей измерения.
  •   Если используется общий атрибут border-width, то:
    • Одно значение указывает ширину линий всех сторон рамки.
    •  Из двух значений, первое установит ширину линий верхней и нижней сторон, а второе – левой и правой.
    •  Из трех значений, первое установит ширину линий верхней стороны, второе – левой и правой, а третье – нижней.
    • Четыре значения укажут ширину линий каждой из сторон - сверху, справа, снизу и слева.
      Нормализованная ширина линии это размер, понятный браузеру в соответствии со стандартом HTML.
      Точный размер нормализованных значений зависит от настроек браузера и от значений остальных атрибутов стилей рамки.
      Нормализованные значения предпочтительны, поскольку дают возможность пользователю самому настраивать вид Web-страницы.
  Стили окраски линий рамки.
  Атрибуты:
  
  • border-left-color - Устанавливает окраску линии левой стороны рамки.
  • border-right-color - Устанавливает окраску линии правой стороны рамки.
  • border-top-color - Устанавливает окраску линии верхней стороны рамки.
  • border-bottom-color - Устанавливает окраску линии нижней стороны рамки.
  • border-color - Устанавливает окраску линий всех сторон рамки.

Формат:

  1. border-left-color
     |border-right-color
     |border-top-color
     |border-bottom-color:
      Цвет
      |transparent
      |inherit
  2. border-color:
      Цвет|transparent|inherit
      [Цвет|transparent|inherit
      [Цвет|transparent|inherit
      [Цвет|transparent|inherit]]]

Значения:

  • Цвет - CSS значение цвета.
  • transparent - Прозрачная линия.
      Прозрачная рамка позволяет закруглить углы поля элемента.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  •   Если используется общий атрибут border-color, то:
    • Одно значение указывает окраску линий всех сторон рамки.
    •  Из двух значений, первое установит окраску линий верхней и нижней сторон, а второе – левой и правой.
    •  Из трех значений, первое установит окраску линий верхней стороны, второе – левой и правой, а третье – нижней.
    • Четыре значения укажут окраску линий каждой из сторон - сверху, справа, снизу и слева.
  Стили начертания линий рамки:
  Атрибуты:
  
  • border-left-style - Устанавливает стиль начертания линии левой стороны рамки.
  • border-right-style - Устанавливает стиль начертания линии правой стороны рамки.
  • border-top-style - Устанавливает стиль начертания линии верхней стороны рамки.
  • border-bottom-style - Устанавливает стиль начертания линии нижней стороны рамки.
  • border-style - Устанавливает стиль начертания линий всех сторон рамки.

Формат:

  1. border-left-style
     |border-right-style
     |border-top-style
     |border-bottom-style:
      hidden
      |dotted
      |dashed
      |solid
      |double
      |groove
      |ridge
      |inset
      |outset
      |none
  2. border-style:
      hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|none|inherit
      [hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|none|inherit
      [hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|none|inherit
      [hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|none]]]

Значения:

  •  hidden – Скрытая линия.
      В отличие от отсутствующей занимает место на Web-станице.
  •  dotted – Пунктирная линия.
  •  dashed – Штриховая линия.
  • solid – Сплошная линия.
  •  double – Двойная линия.
  •  groove – "Вдавленная трехмерная" линия.
  • ridge – "Выпуклая трехмерная" линия.
  • inset – "Трехмерная выпуклость".
  • outset – "Трехмерное углубление".
  •  none – Отсутствие линии.
      Это нормальное значение, оно действует по умолчанию, если начертание стороны не указано в случае использования общего атрибута стилей рамки border.
  •   Если используется общий атрибут border-style, то:
    • Одно значение указывает стиль начертания линий всех сторон рамки.
    •  Из двух значений, первое установит стиль начертания линий верхней и нижней сторон, а второе – левой и правой.
    •  Из трех значений, первое установит стиль начертания линий верхней стороны, второе – левой и правой, а третье – нижней.
    • Четыре значения укажут стиль начертания линий каждой из сторон - сверху, справа, снизу и слева.
  Общие стили линий сторон рамки:
  Атрибуты:
  
  • border-left - Устанавливает общий стиль линии левой стороны рамки.
  • border-right - Устанавливает общий стиль линии правой стороны рамки.
  • border-top - Устанавливает общий стиль линии верхней стороны рамки.
  • border-bottom - Устанавливает общий стиль линии нижней стороны рамки.
  • border - Устанавливает общий стиль линий всех сторон рамки.

Формат:

  • border|border-left|border-right|border-top|border-bottom:
      [Щирина линии] [Начертание линии] [Окраска линии]

Значения:

  Стили оформления рисунка на рамке.
  Атрибуты оформления рисунка на рамке задают только рисунок, сама рамка, в любом случае должна быть задана атрибутом border. Если рамка не задана, то и рисунок на ней не отобразится.
  Рисунок на рамке, даже если его соответствующая ширина меньше ширины линии рамки, все равно полностью закроет всю рамку. Хотя не рисованный дизайн рамки и сохранится под рисунком и будет визуализирован если, по какой-то причине, указанное изображение не сможет быть загружено на Web-страницу, или, если при его загрузке возникла пауза.
  Атрибуты:
  border-image-source -Устанавливает изображение для рисунка на рамке.

Формат:

  • border-image-source:
    Изображение   |Градиент
      |none

Значения border-image-source:

  •  Изображение - CSS значение изображения.
  • Градиент - CSS значение градиента.
  •  none - Отсутствие изображения в рамке.
      Это нормальное значение, оно действует по умолчанию и равносильно отсутствию атрибута border-image.
  •   В CSS рисунок для рамки оформляется довольно своеобразно.
      Если изображение, установленное атрибутом стиля border-image-source, не разбито на части атрибутом стиля border-image-slice, то это изображение только помещается в каждый из углов рамки. При этом изображение соответственно масштабируется.
      Остальные части рамки, каждый браузер заполняет по своему.

      Атрибут стиля border-image-slice позволяет разбить указанное изображение на  ⃰ 9 частей:



      При правильном разбиении, каждая из частей изображения может быть использована для оформления не только рисунка на рамке, но и для рисунка в поле элемента.
      Части 1, 2, 3, 4 автоматически попадают в соответствующие углы рамки.
      Части 5, 6, 7, 8 автоматически используются для оформления соответствующих сторон рамки.
      Часть 9 может быть использована для оформления поля элемента внутри рамки. При этом, указанное изображение масштабируется в размеры поля элемента.
  border-image-slice -Устанавливает разбивку изображения для рисунка на рамке.

Формат:

  • border-image-slice: Ширина1 [Ширина2 [Ширина3 [Ширина4]]] [fill]

Значения border-image-slice:

  • Ширина - Ширина полоски изображения от его соответствующего края.
      Задается линейной величиной без единицы измерения (подразумеваются px) или с единицей измерения %.
      Эти полоски разобьют изображение указанное атрибутом стиля border-image-source на части ⃰.
    • Одно значение устанавливает ширину всех полосок top, bottom, left, right со всех сторон изображения.
    •  Из двух значений, первое установит ширину полосок сверху top и снизу bottom, а второе – слева left и справа right.
    •  Из трех значений, первое установит ширину полосок сверху top, второе – слева left и справа right, а третье – снизу bottom.
    • Четыре значения установят ширину каждой полоски - сверху top, справа right, снизу bottom и слева left.
      Для правильной разбивки изображения ширина любой полоски не должна быть больше 50%.
      Кроме того, разбивка сильно зависит от соотношения размеров поля элемента и размеров указанного изображения.
      В некоторых случаях рамка с изображением может искажаться.
      Размер = 100% (умолчание) - означает что изображение не нарезается, и приведёт к тому, что изображение поместится только в углах рамки.
  • fill - Ключевое слово. Означает, что часть 9 изображения должна быть также использована для заполнения поля элемента внутри рамки.


  border-image-repeat -Устанавливает дизайн изображения на рамке с рисунком.

Формат:

  • border-image-repeat:
      [stretch|repeat|round|space]
      [stretch|repeat|round|space]
      [stretch|repeat|round|space]]
      [stretch|repeat|round|space]]]]

Значения border-image-repeat:

  • stretch - Изображение для соответствующей стороны рамки следует растянуть до размера соответствующей стороны поля элемента на Web-странице. (Умолчание.)
  • repeat - Соответствующую сторону рамки следует замостить изображением до размера соответствующей стороны поля элемента на Web-странице.
  • round - Соответствующую сторону рамки следует замостить изображением с возможной растяжкой до размера соответствующей стороны поля элемента на Web-странице, так, чтобы на рамке уместилось целое количество рисунков.
  • space - Соответствующую сторону рамки следует замостить изображением, крайние рисунки могут быть обрезаны.
    • Одно значение устанавливает дизайн всех сторон рамки.
    •  Из двух значений, первое установит дизайн для сторон сверху и снизу, а второе – слева и справа.
    •  Из трех значений, первое установит дизайн для сторон сверху, второе – слева и справа, а третье – снизу.
    • Четыре значения установят дизайн для сторон - сверху, справа, снизу и слева.
      Если для указанного изображения используется ключевое слово fill, то часть ⃰ 9 этого изображения сформирует поле элемента внутри рамки в соответствии со значением атрибута стиля border-image-repeat.
      Углы рамки оформляются частями ⃰ 1, 2, 3, 4 изображения, и для них отрибут border-image-repeat не имеет значения.
  border-image -Устанавливает общий стиль рамки с рисунком.

Формат:

  • border-image: Изображение|Градиент
      Ширина1 [Дизайн1]
      [Ширина2 [Дизайн1]]
      [Ширина3 [Дизайн1]]]
      [Ширина4 [Дизайн1]]]]
      |none

Значения border-image:

  •  Изображение - CSS значение изображения.
  • Градиент - CSS значение градиента.
  • Ширина - Значение атрибута border-image-slice для соответствующей стороны рамки.
    • Одно значение устанавливает ширину полоски для всех сторон рамки.
    •  Из двух значений, первое установит ширину полоски для верхней и нижней сторон, а второе – левой и правой.
    •  Из трех значений, первое установит ширину полоски для верхней стороны, второе – левой и правой, а третье – нижней.
    • Четыре значения установят ширину полоски для каждой их сторон - сверху, справа, снизу и слева.
  • Дизайн - Значение атрибута border-image-repeat для соответствующей стороны рамки.
    • Одно значение устанавливает дизайн для всех сторон рамки.
    •  Из двух значений, первое установит дизайн для верхней и нижней сторон, а второе – левой и правой.
    •  Из трех значений, первое установит дизайн для верхней стороны, второе – левой и правой, а третье – нижней.
    • Четыре значения установят дизайн для каждой их сторон - сверху, справа, снизу и слева.
  •  none - Отсутствие рамки-изображения. Это нормальное значение, оно действует по умолчанию и равносильно отсутствию атрибута border-image.
  border-image-width - Устанавливает ширину рисунка на рамке.

Формат:

  • border-image-width: Ширина1 [Ширина2 [Ширина3 [Ширина4]]]
      |auto

Значения border-image-width:

  • Ширина - Ширина рисунка на соответствующей стороне рамки с рисунком.
      Задается положительной линейной величиной без единицы измерения, или с единицей измерения %.
      Значение без единицы измерения будет коэффициентом к соответствующей величине border-width, и не может быть больше числа, которое соответствует половине ширины или высоты поля элемента (каждый угол рамки должен быть заполнен).
    Значение с единицей измерения % означает процент от соответствующей величины border-width, и не может быть больше 50% (каждый угол рамки должен быть заполнен).
      Если ширина рисунка, установленная атрибутом border-image-width, меньще чем ширина соответствующей стороны рамки, то рисунок все равно полностью скроет всю не рисованную рамку.
    Хотя не рисованный дизайн рамки сохранится под рисунком, и будет визуализирован если, по какой-то причине, указанное изображение не сможет быть загружено на Web-страницу, или, если при его загрузке возникла пауза.
  • auto - Ширина соответствующей стороны рамки равна соответствующему значению атрибута border-width (умолчание).
    • Одно значение устанавливает ширину всех сторон рамки с рисунком.
    •  Из двух значений, первое установит ширину верхней и нижней, а второе – левой и правой сторон рамки с рисунком.
    •  Из трех значений, первое установит ширину верхней, второе – левой и правой, а третье – нижней сторон рамки с рисунком.
    • Четыре значения установят ширину каждой из сторон рамки с рисунком - верхней, правой, нижней и левой.
  border-image-outset - Устанавливает допустимую видимую ширину рисунка на рамке.
  Если часть рисунка, установленная атрибутом стиля border-image-outset, будет видна на Web-странице, то, даже если оставшаяся часть рисунка рамки выйдет за границы видимости, это не приведёт к появлению соответствующей линейки скроллинга или выходу поля элемента за установленные границы.

Формат:

  • border-image-outset: Ширина1 [Ширина2 [Ширина3 [Ширина4]]]

Значения:

  • Ширина - Допустимая видимая ширина соответствующей стороны рамки с рисунком.
      Задается положительной линейной величиной без единицы измерения (подразумеваются px) или с единицей измерения %.
      Значение без единицы измерение будет коэффициентом к соответствующей величине border-image-width.
      Рисунок соответствующей стороны задаётся атрибутом border-image-slice.
    • Одно значение устанавливает допустимую видимую ширину всех сторон рамки с рисунком.
    •  Из двух значений, первое установит допустимую видимую ширину верхней и нижней, а второе – левой и правой сторон рамки с рисунком.
    •  Из трех значений, первое установит допустимую видимую ширину верхней, второе – левой и правой, а третье – нижней сторон рамки с рисунком.
    • Четыре значения установят допустимую видимую ширину каждой из сторон рамки с рисунком - верхней, правой, нижней и левой.
  Стили закругления углов рамки:
  Атрибуты:
  
  • border-top-left-radius - Устанавливает радиусы закругления левого верхнего угла рамки.
  • border-top-right-radius - Устанавливает радиусы закругления правого верхнего угла.
  • border-bottom-left-radius - Устанавливает радиусы закругления левого нижнего угла рамки.
  • border-bottom-right-radius - Устанавливает радиусы закругления правого нижнего угла рамки.
  • border-radius - Устанавливает радиусы закругления всех углов рамки.
  По существу радиусы закругления угла задают горизонтальный и вертикальный радиусы виртуального эллипса, который должен касаться соответствующих сторон рамки в этом угле.
  Видимая часть этого эллипса от точек касания и создаёт соответствующее закругление.

Формат:

  • border-top-left-radius
     |border-top-right-radius
     |border-bottom-left-radius
     |border-bottom-right-radius:
      Размер1 [Размер2]
      |none
  • border-radius:
      Размер1 [Размер2]|none|
      [Размер1 [Размер2]|none|
      [Размер1 [Размер2]|none|
      [Размер1 [Размер2]|none|]]]

Значения:

  • Размер1 - Линейная величина с единицей измерения.
      Радиус закругления угла по горизонтали, или общий.
      Обязательное значение.
  • Размер2 - Линейная величина с единицей измерения.
      Радиус закругления угла по вертикали.
      Если не указан используется значение размер1.
  •  none - Отсутствие закругления рамки.
      Это нормальное значение, оно действует по умолчанию и равносильно отсутствию атрибутов радиусов закругления углов рамки.
  •   Если используется общий атрибут border-radius, то:
    • Одно значение указывает радиусы закругления всех углов рамки.
    •  Из двух значений, первое установит радиусы закругления левого верхнего угла, а второе – правого нижнего.
    •  Из трех значений, первое установит радиусы закругления левого верхнего угла,, второе – правого верхнего и левого нижнего, а третье – правого нижнего.
    • Четыре значения укажут радиусы закругления - левого верхнего, правого верхнего, правого нижнего и левого нижнего.
Примеры:

  <IMG src="../content/ROJI.jpg">



      Наведите мышку на соответствующее поле:

  border-image-source: url("../content/ROJI.jpg")

Рыба


  border-image-source: url("../content/ROJI.jpg"); border-image-slice: 25%; border-image-repeat: repeat;

Рыба


  border-image-source: url("../content/ROJI.jpg"); border-image-slice: 25% fill; border-image-repeat: repeat;

Рыба