Border bottom html: border-bottom-color | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

border-bottom | WebReference

Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Краткая информация

Значение по умолчанию	Зависит от использования
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

border-bottom: [border-bottom-width || border-bottom-style || border-bottom-color]

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Значение border-bottom-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-bottom-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-bottom-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>border-bottom</title> <style> .panel { background: #ccc; /* Цвет фона */ } .panel P.content { padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ border-top: 2px dotted white; /* Параметры линии вверху */ } .panel P.title { font-family: sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ background: maroon; /* Цвет фона */ color: white; /* Цвет текста */ border-bottom: 2px solid white; /* Параметры линии внизу */ } </style> </head> <body> <div> <p>Резкий базовый тип личности глазами современников</p> <p>Его экзистенциальная тоска выступает как побудительный мотив творчества, однако пародия многопланово заканчивает общекультурный цикл.

</p> </div> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom

Объектная модель

Объект.style.borderBottom

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


4	7	12	1	3. 5	1	1


1	1	6	1

Браузеры

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

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

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

Границы

См. также

border
border-left
border-right
border-top
Точки между слов

Рецепты

Как добавить пунктирное подчёркивание к ссылкам?
Как сделать горизонтальную линию?
Как сделать подчёркивание заголовка?

Практика

Двойное подчёркивание ссылок
Линии в таблице
Пунктирное подчёркивание ссылок

seodon.

ru | CSS справочник — border-bottom-style

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

Свойство CSS border-bottom-style используется для создания рамки в нижней части элемента (нижней границы) и одновременного указания ее стиля (вида).

Для изменения стиля рамки сразу всех сторон элемента можно использовать свойство border-style, а если для всех сторон стиль одинаковый, то border.

Тип свойства

Назначение: рамки.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства border-bottom-style являются ключевые слова задающие стиль рамки.

Возможные значения и их описание
Значение	Описание	Пример
none	Рамка убрана, если указана толщина рамки, то она становится равной нулю (0).	none
hidden	Скрывает рамку. То же, что и none за исключением случая с ячейками таблицы, к которым применено свойство border-collapse: collapse. Тогда общая для двух ячеек граница не будет отображена вне зависимости от того, какая рамка имеется у соседней ячейки.	hidden
dotted	Рамка, состоящая из точек.	dotted
dashed	Пунктирная рамка из коротких отрезков.	dashed
solid	Сплошная линия.	solid
double	Двойная сплошная линия.	double
groove	Вид рамки вырезанной в поверхности.	groove
ridge	Противоположно groove. Вид выступающей над поверхностью рамки.	ridge
inset	Рамка, как будто блок вдавили в поверхность.	inset
outset	Противоположно inset. Рамка, будто блок выдавили из поверхности.	outset
inherit	наследует значение border-bottom-style от родительского элемента.

Процентная запись: не существует.

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

По одной стороне рамки тяжело понять ее внешний вид, для этого лучше посмотреть свойство border-style, где показаны стили рамок со всеми сторонами.

Синтаксис

Пример CSS: использование border-bottom-style

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство border-bottom-style</title>
  <style type="text/css">
   h2, h3 {
    text-align:center; /* текст заголовков по центру */
    color: #0066ff; /* цвет текста */
   }
   h2 {
    border-bottom-color: #ff0066; /* цвет нижней части рамки */
    border-bottom-width: 3px; /* ее толщина */
    border-bottom-style: solid; /* стиль */
   }
   h3 {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
   }
  </style>
 </head>
 <body>
  <h2>Заголовок h2</h2>
  <h3>Заголовок h3</h3>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS border-bottom-style.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Да	Да	Да

Internet Explorer 6.0 и 7.0 не понимают значения inherit и hidden.

Свойство CSS border-bottom-style

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Задайте стиль для нижней границы:

div {border-bottom-style: dotted;}

Попробуйте сами »

Ниже приведены дополнительные примеры «Попробуйте сами».

Определение и использование

Свойство border-bottom-style устанавливает стиль нижней границы элемента.

Показать демо ❯

Значение по умолчанию:	нет
Унаследовано:	нет
Анимация:	нет. Читать о анимированном
Версия:	CSS1
Синтаксис JavaScript:	объект .style.borderBottomStyle=»с точками» Попробуй

Поддержка браузера

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

Собственность
нижняя граница	1,0	5,5	1,0	1,0	9,2

Синтаксис CSS

Значения свойств

Значение	Описание	Демо
нет	Указывает отсутствие границы. Это по умолчанию	Демонстрация ❯
скрытый	То же, что и «нет», кроме пограничного конфликта разрешение для элементов таблицы	Демонстрация ❯
с точкой	Задает пунктирную границу	Демонстрация ❯
пунктир	Задает пунктирную границу	Демонстрация ❯
твердый	Задает сплошную границу	Демонстрация ❯
двойной	Задает двойную рамку	Демонстрация ❯
канавка	Задает трехмерную рифленую границу. Эффект зависит от значение цвета границы	Демонстрация ❯
хребет	Задает трехмерную ребристую границу. Эффект зависит от значение цвета границы	Демонстрация ❯
вкладыш	Задает границу 3D-врезки. Эффект зависит от значение цвета границы	Демонстрация ❯
начало	Указывает начальную 3D-рамку. Эффект зависит от значение цвета границы	Демонстрация ❯
инициал	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

Пример

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

div {border-bottom-style: dashed;}

Попробуйте сами »

0003

div {border-bottom-style: solid;}

Попробуйте сами »

Пример

Двойная нижняя граница:

div {border-bottom-style: double;}

Попробуйте сами »

3

53 2 Пример

Удалить нижнюю границу:

div {border-bottom-style: none;}

Попробуйте сами »

Пример

Нижняя граница канавки:

div {
  border-bottom-style: канавка;
  border-bottom-color: коралловый;
  border-bottom-width: 7px;
}

Попробуйте сами »

Пример

Нижняя граница ребра:

div {
border-bottom-style: ridge;
граница-нижний-цвет: коралловый;
ширина нижней границы: 7 пикселей;
}

Попробуйте сами »

Пример

Нижняя граница вставки:

div {
border-bottom-style: inset;
граница-нижний-цвет: коралловый;
ширина нижней границы: 7 пикселей;
}

Попробуйте сами »

Пример

Начальная нижняя граница:

div {
  border-bottom-style: outset;
  border-bottom-color: коралловый;
  border-bottom-width: 7px;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Граница CSS

Ссылка CSS: свойство border-bottom

Ссылка HTML DOM: свойство borderBottomStyle

❮ Назад Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Как применить свойство CSS: border-bottom

Назад Как применить свойство CSS: border-bottom

Свойство border-bottom позволяет управлять шириной, стилем и цветом нижней границы коробка. Возможность манипулировать этим аспектом может быть полезна для выделения и демонстрации конкретной коробки, когда вы хотите, чтобы нижняя часть выделялась отдельно от трех других сторон.

В этом руководстве для начинающих вы изучите несколько простых приемов эффективного и полезного применения свойства border-bottom . Информация будет сочетать функции CSS (каскадные таблицы стилей) при создании эффекта на странице HTML (язык гипертекстовой разметки). По пути вам также будут предоставлены некоторые забавные и креативные элементы дизайна. Все, что вам нужно для начала, это простой редактор кода, такой как Notepad++.

Какие есть варианты?

Ширина

При определении ширины у вас есть следующие параметры при использовании свойства border-bottom-width. Эти значения позволяют указать «базовые» размеры. Конечно, у вас также есть возможность использовать пиксели в качестве значения, чтобы иметь полный контроль над очень точными измерениями определяющей ширины.

Средняя: Указывает среднюю нижнюю границу. Это состояние по умолчанию.
Thin: Определяет тонкую нижнюю границу.
Толстая: Задает толстую нижнюю границу.
Длина: Позволяет определить толщину нижней границы.
Исходное значение: Устанавливает для этого свойства значение по умолчанию.
Количество пикселей: Устанавливает ширину границы в пикселях.

Стиль

При определении стиля у вас есть следующие опции при использовании border-bottom-style свойство. Существует длинный список значений, с которыми вы можете играть, и каждое из них дает вам что-то совершенно новое. Пример будет приведен далее в этом руководстве.

Нет: Не указывает границы. Это значение по умолчанию
Скрытое: То же, что и «нет».
Точечная: Задает пунктирную границу.
Пунктир: Задает пунктирную границу.
Сплошная: Определяет сплошную границу.
Double: Задает двойную границу.
Канавка: Определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы.
Ребро: Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границы.
Вставка: Определяет трехмерную границу вставки. Эффект зависит от значения цвета границы.
Outset: Определяет начальную границу 3D. Эффект зависит от значения цвета границы.
Исходное значение: Устанавливает для этого свойства значение по умолчанию.

Цвет

Когда вы определяете ширину, у вас есть следующие опции для определения свойства border-bottom-color . Когда дело доходит до цвета, варианты практически безграничны. Это область, где вы действительно можете продемонстрировать свое понимание цветовой палитры.

Примечание: Вы должны всегда объявлять свойство border-style или border-bottom-style перед свойством border-bottom-color. Элемент должен иметь определенную границу, прежде чем вы сможете изменить цвет.

Цвет: Указывает цвет нижней границы. Полный список возможных значений цвета см. в разделе Цветовые значения CSS. Цвет по умолчанию — это текущий цвет элемента.
Прозрачный: Указывает, что цвет границы должен быть прозрачным.
Исходное значение: Устанавливает для этого свойства значение по умолчанию.

Начало HTML-страницы

Создание блока

Начиная со следующего примера кода, вы можете увидеть, что был добавлен некоторый CSS, чтобы блок был определен с фактическими границами. Это поле будет содержать «сплошную» рамку определенного цвета. Начав с поля с полной рамкой, вы сможете увидеть преобразования по мере продвижения в этом уроке.

 
Граница-Низ
<голова>
<стиль>
  .bordered {
    ширина: 200 пикселей;
    высота: 100 пикселей;
    отступ: 20 пикселей;
    граница: 3 пикселя сплошной темно-оранжевый;
   }

Коробка с рамкой

Добавление Border-Bottom-Width в CSS

При добавлении свойства border-bottom необходимо сначала определить ширину границы. Это будет определять только нижнюю границу поля и поэтому должно быть определено по-другому, чтобы отделить его от остальных. Вы можете использовать значения, перечисленные выше, включая размеры в пикселях, чтобы лучше контролировать точную толщину границы.

 
Граница-Низ
<голова>
<стиль>
  .bordered {
    ширина: 200 пикселей;
    высота: 100 пикселей;
    отступ: 20 пикселей;
    граница: 3 пикселя сплошной темно-оранжевый;
    ширина нижней границы: 12px;
  }

Коробка с рамкой

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

Добавление нового цвета к свойству Border-Bottom

Теперь, когда вы определили толщину границы, пришло время использовать свойство border-bottom-color для определения определенного цвета границы.

 
Граница-Низ
<голова>
<стиль>
  .bordered {
    ширина: 200 пикселей;
    высота: 100 пикселей;
    отступ: 20 пикселей;
    граница: 3 пикселя сплошной темно-оранжевый;
    ширина нижней границы: 12px;
    цвет нижней границы: темно-зеленый;
  }

Коробка с рамкой

Как видите, нижняя граница была определена темно-зеленым цветом, добавленным в CSS.

Добавление определенного стиля к свойству Border-Bottom

Теперь, когда вы определили толщину и цвет границы, пришло время использовать свойство border-bottom-style для определения определенного стиля к границе.

 
Граница-Низ
<голова>
<стиль>
  .bordered {
    ширина: 200 пикселей;
    высота: 100 пикселей;
    отступ: 20 пикселей;
    граница: 3 пикселя сплошной темно-оранжевый;
    ширина нижней границы: 12px;
    цвет нижней границы: темно-зеленый;
    граница снизу: пунктирная;
  }

Коробка с рамкой

Как видите, нижняя граница была определена с помощью стиля с точками , как определено в CSS.

Заключительное примечание

Добавление Border-Radius в CSS

Хотя это руководство посвящено свойству border-bottom, вы можете взять на заметку углубиться в свою палитру CSS, чтобы сделать вашу коробку еще более эффектной. . Вы можете сделать это, добавив свойство border-radius . Что это делает, так это придает вашей коробке закругленные края. Часто основная коробка с ее 9Углы в 0 градусов могут быть не совсем тем, что вы хотите показать.

Примечание: По мере увеличения значения радиуса границы углы становятся более закругленными. Пример: значение 12 пикселей будет более округлено, чем значение 8 пикселей.

 
Граница-Низ
<голова>
<стиль>
  .bordered {
    ширина: 200 пикселей;
    высота: 100 пикселей;
    отступ: 20 пикселей;
    граница: 3 пикселя сплошной темно-оранжевый;
    ширина нижней границы: 12px;
    цвет нижней границы: темно-зеленый;
    радиус границы: 12px;
  }

Коробка с рамкой

В результате получается следующее:

Практические знания об использовании CSS-свойства border-bottom , а также использование всех многочисленных значений и возможностей для изменения стиля и ширины дают вам неограниченные возможности для творческий и наслаждайтесь художественным процессом для дальнейшего улучшения вашего веб-сайта.

Border bottom html: border-bottom-color | htmlbook.ru

border-bottom | WebReference

Краткая информация

Синтаксис

Значения

Пример

Объектная модель

Примечание

Спецификация

Браузеры

См. также

Рецепты

Практика

seodon.

Тип свойства

Значения

Синтаксис

Версии CSS

Браузеры

Свойство CSS border-bottom-style

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Другие примеры

Пример

Пример

3

53

2 Пример

Пример

Пример

Пример

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

Как применить свойство CSS: border-bottom

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

Рубрики