Что в html означает border
Перейти к содержимому

Что в html означает border

  • автор:

Атрибут border

Для изменения толщины и цвета рамки таблицы используйте стилевое свойство border.

Рамка таблицы table

.

Браузеры

3 12 1 3.5 1 1

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

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

border

Свойство border отвечает за отрисовку видимой границы блока. Часто видимую границу блока называют рамкой.

Само свойство border является шорткатом (короткой записью) и объединяет в себе значение для нескольких полных свойств:

  • border — width ;
  • border — style ;
  • border — color .

Пример

Скопировать ссылку «Пример» Скопировано

Украсим текстовую карточку цветной сплошной рамкой.

   

Повседневная практика показывает, .

div class="element"> p>Повседневная практика показывает, . p> div>

Зададим рамку толщиной 5 пикселей, сплошную, голубого цвета:

 .element  border: 5px solid #2E9AFF;> .element  border: 5px solid #2E9AFF; >      

Внешний вид наложения рамок

�� Ещё немного про треугольники. А точнее, стрелки. Их тоже можно создать при помощи border , но тут понадобится подключить свойство transform , чтобы повернуть элемент с рамками на 45 градусов в нужную сторону:

 div> div class="arrow _prev">div> div class="arrow _next">div> div>      
 .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001;> .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg);> .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate(-135deg);> .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001; > .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg); > .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate(-135deg); >      

Чем не стрелки для слайдера? ��

�� Часто встречающийся дизайнерский приём — появление рамки вокруг элемента при наведении на него курсора мыши.

Если просто добавлять рамку по селектору :hover , то элемент будет дёргаться. Причина в том, что размер элемента увеличивается на ширину рамки. Чтобы подобных подёргиваний не происходило, изначально задайте рамку нужной толщины, но установите ей прозрачный цвет ( transparent ). А по наведению курсора просто меняйте цвет на нужный. Profit! Вы прекрасны ��

Атрибут border

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Свойство border-style

Свойство border-style задает стиль границы для всех сторон одновременно или отдельно для каждой стороны. Является свойством-сокращением для следующих свойств: border-left-style , border-right-style , border-top-style , border-bottom-style .

Синтаксис

Значения

Значение Описание
solid Сплошная линия.
dotted Граница в виде точек.
dashed Граница в виде тире.
ridge Граница в виде выпуклой линии.
double Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px .
groove Вогнутая граница.
inset Вдавленная граница.
outset Выпуклая граница.
none Отсутствие границы.

Значение по умолчанию: none .

Количество значений

Свойство может принимать 1 , 2 , 3 или 4 значений, указываемых через пробел:

Количество Описание
1 Тип для всех сторон одновременно.
2 Первое значение для верха и низа, второе — для левой и правой границ.
3 Первое значение для верха, второе — для левой и правой границ, третье — для нижней.
4 Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *