border-bottom-color | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Устанавливает цвет границы внизу элемента.
Синтаксис
border-bottom-color: цвет | transparent | inherit
Значения
См. цвет
- transparent
- Устанавливает прозрачный цвет.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-bottom-color</title>
<style>
#panel {
background: #ccc; /* Цвет фона */
}
#panel p {
padding: 5px; /* Добавляем поля */
margin: 0; /* Убираем отступы у параграфа */
}
#title {
background: navy; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom-width: 2px; /* Толщина линии внизу */
border-bottom-style: solid; /* Стиль линии внизу */
border-bottom-color: white; /* Цвет линии внизу */
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat. </p>
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-bottom-colorОбъектная модель
[window.]document.getElementById(«elementID»).style.borderBottomColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
border-bottom — CSS | MDN
Сокращённое свойство CSS border-bottom
описывает нижнюю границу элемента border. Оно устанавливает значения border-bottom-width
, border-bottom-style
и border-bottom-color
.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github. com/mdn/interactive-examples and send us a pull request.
Как и все сокращённые свойства, border-bottom
устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что …
border-bottom-style: dotted;
border-bottom: thick green;
… это то же самое, что …
border-bottom-style: dotted;
border-bottom: none thick green;
… и значение border-bottom-style
, указанное перед border-bottom
игнорируется. Поскольку значением по умолчанию для border-bottom-style
является none
, то без указания border-style
граница не будет показана.
This property is a shorthand for the following CSS properties:
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
Values
<line-width> || <line-style> || <color>где
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Applying a bottom border
HTML
<div>
This box has a border on the bottom side.
</div>
CSS
div {
border-bottom: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
Results
BCD tables only load in the browser
border-bottom | CSS (Примеры)
Свойство border-bottom
позволяет одновременно установить толщину, стиль и цвет нижней границы элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.
ФонСинтаксис
border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue;
Значения
Значение border-bottom-width
определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-bottom-style
. Их названия и результат действия представлен на рис. 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>
CSS-свойства и media queries — Help Mail.ru. Для разработчиков
Почта поддерживает следующие CSS-свойства:
azimuth |
сolumn-rule-color |
outline |
background |
column-rule-style |
outline-color |
background-blend-mode |
column-rule-width |
outline-style |
background-clip |
column-span |
outline-width |
background-color |
column-width |
overflow |
background-image |
columns |
overflow-x |
background-origin |
direction |
overflow-y |
background-position |
display |
padding |
background-repeat |
elevation |
padding-bottom |
background-size |
empty-cells |
padding-left |
border |
float |
padding-right |
border-bottom |
font |
padding-top |
border-bottom-color |
font-family |
pause |
border-bottom-left-radius |
font-feature-settings |
pause-after |
border-bottom-right-radius |
font-kerning |
pause-before |
border-bottom-style |
font-size |
pitch |
border-bottom-width |
font-size-adjust |
pitch-range |
border-collapse |
font-stretch |
quotes |
border-color |
font-style |
richness |
border-left |
font-synthesis |
speak |
border-left-color |
font-variant |
speak-header |
border-left-style |
font-variant-alternates |
speak-numeral |
border-left-width |
font-variant-caps |
speak-punctuation |
border-radius |
font-variant-east-asian |
speech-rate |
border-right |
font-variant-ligatures |
stress |
border-right-color |
font-variant-numeric |
table-layout |
border-right-style |
font-weight,height |
text-align |
border-right-width |
image-orientation |
text-combine-upwrite |
border-spacing |
image-resolution |
text-decoration |
border-style |
isolation |
text-decoration-color |
border-top |
letter-spacing |
text-decoration-line |
border-top-color |
line-height |
text-decoration-skip |
border-top-left-radius |
list-style |
text-decoration-style |
border-top-right-radius |
list-style-position |
text-emphasis |
border-top-style |
list-style-type |
text-emphasis-color |
border-top-width |
margin |
text-emphasis-style |
border-width |
margin-bottom |
text-indent |
box-sizing |
margin-left |
text-orientation |
break-after |
margin-right |
text-overflow |
break-before |
margin-top |
text-transform |
break-inside |
max-height |
text-underline-position |
caption-side |
max-width |
unicode-bidi |
clear |
min-height |
vertical-align |
color |
min-width |
voice-family |
column-count |
mix-blend-mode |
width |
column-fill |
object-fit |
word-spacing |
column-gap |
object-position |
writing-mode |
column-rule |
opacity |
Почта поддерживает следующие media queries:
all |
min-device-width |
max-resolution |
screen |
max-device-width |
and |
min-width |
orientation | only |
max-width |
min-resolution |
prefers-color-scheme |
Границы — Material-UI
Используй настройки border и border-radius для стилизации элементов. Доступно для изображений, кнопок и других элементов.
Border
Используй настройки для добавления или удаления границ. Можно устанавливать как все сразу, так и каждую часть по отдельности.
Добавление
<Box border={1}>…
<Box borderTop={1}>…
<Box borderRight={1}>…
<Box borderBottom={1}>…
<Box borderLeft={1}>…
Удаление
<Box border={0}>…
<Box borderTop={0}>…
<Box borderRight={0}>…
<Box borderBottom={0}>…
<Box borderLeft={0}>…
Цвет границы
<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
Border-radius
<Box borderRadius="50%">…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…
API
import { borders } from '@material-ui/system';
Импорт | Свойство | Свойство CSS | В теме |
---|---|---|---|
border | border | border | borders |
borderTop | borderTop | border-top | borders |
borderLeft | borderLeft | border-left | borders |
borderRight | borderRight | border-right | borders |
borderBottom | borderBottom | border-bottom | borders |
borderColor | borderColor | border-color | palette |
borderRadius | borderRadius | border-radius | shape |
Свойство border-color — цвет границы
Свойство border-color задает цвет границы для всех сторон одновременно или отдельно для каждой стороны. Значением свойства служат любые единицы для цвета. Значение по умолчанию: такой же цвет, как и у текста блока.
Свойство является свойством-сокращением для следующих свойств: border-left-color, border-right-color, border-top-color, border-bottom-color.
Синтаксис
селектор {
border-color: цвет;
}
Количество значений
Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:
Количество | Описание |
---|---|
1 | Тип для всех сторон одновременно. |
2 | Первое значение для верха и низа, второе — для левой и правой границ. |
3 | Первое значение для верха, второе — для левой и правой границ, третье — для нижней. |
4 | Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы. |
Пример
Давайте покрасим границу блока в красный цвет:
<div></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red;
width: 300px;
height: 100px;
}
:
Пример
Зададим красную границу для верхней и нижней стороны, а голубую для правой и левой стороны:
<div></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue;
width: 300px;
height: 100px;
}
:
Пример
Зададим красную границу для верхней стороны, голубую для правой, зеленую для нижней, черную для левой стороны:
<div></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Пример
Зададим одновременно разную толщину, тип и цвет границы:
<div></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Пример
Если цвет границы не задан в border-color — он возьмется из свойства color:
<div></div>
#elem {
color: red;
border-style: solid;
border-width: 2px;
width: 300px;
height: 100px;
}
:
Смотрите также
- свойство border-width,
которое задает толщину границы - свойство border-style,
которое задает тип границы - свойство border,
которое является свойством-сокращением для границы
Руководство CSS Borders
Свойство (property) CSS Border используется для установки границы (border) элементу, точнее ширину границы (border width), стиль границы (border style), и цвет границы (border color).
Самый простой синтаксис для установки границы (border) для элемента:
border: border-width border-style border-color; /* Example: */ border: 40px solid LightGray;
Пример:
<div> This is a div <br/> border: 40px solid LightGray; </div>
border-width | Необязательно, значением по умолчанию является medium. |
border-style | Обязательно. |
border-color | Необязательно, его значение по умолчанию зависит от графической среды пользователя (User’s graphic environment) |
<div> 3 values (border-width, border-style, border-color): <p>border: 1px solid LightGray;</p> </div> <div> 2 values (border-style, border-color): <p>border: solid LightGray;</p> </div> <div> 1 values (border-style): <p>border: solid;</p> </div>
Вместо использования CSS border вы можете использовать 3 свойства (property): CSS border-width & CSS border-style & CSS border-color.
<div> <p>border-width: 40px; border-style: solid; border-color: LightGray;</p> </div>
Свойство (property) CSS border-width используется для установки ширины границы для элемента. Вы можете предоставить ему 4 значения, включая ширину верхней стороны, ширину правой стороны, ширину нижней стороны, ширину левой стороны.
border-width: border-top-width border-right-width border-bottom-width border-left-width; /* Example: */ boder-width: 10px 20px 30px 40px;
Если вы предоставите 2 значения для CSS border-width, первое значение применяется к верхней и нижней стороне, второе значение применяется к левой и правой стороне.
Если вы предоставите 3 значения для CSS border-width, первое значение применяется к верхней стороне, второе значение применяется к левой и правой стороне, третье значение применяется к нижней стороне.
Если вы предоставите 1 значения для CSS border-width, оно будет применено ко всем 4-м сторонам элемента.
/* Keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global keywords */ border-width: inherit; border-width: initial; border-width: unset;
Вместо использования CSS border-width, вы можете использовать CSS border-top-width, CSS border-right-width, CSS border-bottom-width, CSS border-left-width.
css-border-width-example5.html
<!DOCTYPE html> <html> <head> <title>CSS Border</title> <meta charset="UTF-8"/> <style> .my-div { padding:10px; border-top-width: thin; border-bottom-width:thick; border-left-width: 1px; border-right-width: 10px; border-style: solid; } </style> </head> <body> <h4>CSS border-width</h4> <div> border-top-width: thin; <br/> border-bottom-width:thick; <br/> border-left-width: 1px; <br/> border-right-width: 10px; <br/> </div> </body> </html>
Свойство (property) CSS border-style используется для настройки стиля границы (border style) для элемента. Вы можете ей предоставить 4 значения, это стили верхней, правой, нижней и левой сторон.
border-style: border-top-style border-right-style border-bottom-style border-left-style; /* Example: */ border-style: dotted dashed solid double;
css-border-style-example.html
<div> border-style: dotted dashed solid double; </div>
Если вы предоставите 2 значения для CSS border-style, первое значение применяется к верхней и нижней сторонам, второе значение применяется к левой и правой сторонам.
<div> border-style: dotted dashed; </div>
Если вы предоставите 3 значения для CSS border-style, первое значение применяется к верхней стороне, второе значение применяется к левой и правой сторонам, третье значение применяется к нижней стороне.
css-boder-style-example3.html
<div> border-style: dotted dashed solid; </div>
Если вы предоставите 1 значение для CSS border-style, оно применится ко всем сторонам элемента.
Возможные значения у CSS border-style:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
<div>border-style:dotted</div> <div>border-style:dashed</div> <div>border-style:solid</div> <div>border-style:double</div> <div>border-style:groove</div> <div>border-style:ridge</div> <div>border-style:inset</div> <div>border-style:outset</div> <div>border-style:none</div> <div>border-style:hidden</div>
Вместо использования CSS border-style, вы можете использовать CSS border-top-style, CSS border-right-style, CSS border-bottom-style, CSS border-left-style.
css-boder-style-example5.html
<!DOCTYPE html> <html> <head> <title>CSS Border</title> <meta charset="UTF-8"/> <style> .my-div { padding:10px; border-width: 5px; border-top-style: dotted; border-right-style: dashed; border-bottom-style: solid; border-left-style: double; } </style> </head> <body> <h4>CSS border-style</h4> <div> border-top-style: dotted; <br/> border-right-style: dashed; <br/> border-bottom-style: solid; <br/> border-left-style: double; </div> </body> </html>
CSS border-style:none и CSS border-style:hidden одинаковы, они только отличаются когда используются для свернутой таблицы (Collapsed table). Вы можете просмотреть объяснение в статье ниже:
Свойство (property) CSS border-color используется для установки цвета границы (border color) для элемента. Вы можете предоставить ему 4 значения, это цвета для верхней, правой, нижней и левой сторон.
<div> border-color: green red purple yellow; </div>
Если вы предоставите 2 значения для CSS border-color, первое значение применяется к верхней и нижней сторонам, второе значение применяется к левой и правой сторонам
<div> border-color: green red; </div>
Если вы предоставите 3 значения для CSS border-color, первое значение применяется к верхней cтороне, второе значение применяется к левой и правой сторонам, третье значение применяется к нижней стороне.
css-border-color-example3.html
<div> border-color: green red blue; </div>
Вместо использования CSS border-color, вы можете использовать CSS border-top-color, CSS border-right-color, CSS border-bottom-color, CSS border-left-color.
border-top-color: blue; border-right-color: red; border-bottom-color: purple; border-left-color: yellow;
border-bottom — CSS: каскадные таблицы стилей
Сокращенное свойство CSS border-bottom
устанавливает нижнюю границу элемента. Он устанавливает значения border-bottom-width
, border-bottom-style
и border-bottom-color
.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Как и все сокращенные свойства, border-bottom
всегда устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Он устанавливает для тех, которые не указаны, значения по умолчанию. Это означает, что …
border-bottom-style: пунктирная;
нижняя граница: густо-зеленый;
… фактически то же самое, что …
border-bottom-style: пунктирная;
нижняя граница: без густого зеленого цвета;
…и значение border-bottom-style
, данное до border-bottom
, игнорируется. Поскольку значение по умолчанию border-bottom-style
равно none
, отсутствие указания части border-style
приводит к отсутствию границы.
Это свойство является сокращением для следующих свойств CSS:
нижняя граница: 1px;
нижняя граница: 2 пикселя с точкой;
нижняя граница: синяя пунктирная линия;
Три значения сокращенного свойства могут быть указаны в любом порядке, и одно или два из них могут быть опущены.
Значения
|| <стиль-линия> || <цвет>, где <ширина линии> = <длина> | тонкий | средний | толстый <стиль-линии> = нет | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | исходный <цвет> = | | | | | <имя-цвета> | текущий цвет | <цвет устаревшей системы> где = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?) = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |
Применение нижней границы
HTML
Это поле имеет границу с нижней стороны.
CSS
div {
border-bottom: синий пунктир 4px;
цвет фона: золото;
высота: 100 пикселей;
ширина: 100 пикселей;
font-weight: жирный;
выравнивание текста: центр;
}
Результаты
таблицы BCD загружаются только в браузере
border-bottom-color · Документы WebPlatform
Сводка
Устанавливает цвет нижней границы. На этой странице объясняется значение border-bottom-color, но часто вам будет удобнее исправить нижний цвет границы как часть сокращенного набора: border-bottom или border-color.
Цвета можно определить несколькими способами. Для получения дополнительной информации см. Использование.
Обзорная таблица
- Начальное значение
-
цвет - Значение свойства
‘цвет’ - Относится к
- Все элементы
- Унаследовано
- Нет
- Медиа
- визуал
- Расчетное значение
- , когда берется из свойства «цвет», вычисленное значение «цвет»; в противном случае, как указано
- Анимационный
- Да
- Свойство объектной модели CSS
-
borderTopColor
- процентов
- Н / Д
Синтаксис
-
border-bottom-color:
-
border-bottom-color: currentColor
-
border-bottom-color: наследовать
-
цвет нижней границы: прозрачный
Значения
- <цвет>
- Вычисленное значение свойства «цвет». Это значение может быть ключевым словом основного цвета, например красным или бледно-лиловым, числовым значением, значением RGB или RGBA или значением HSL или HSLA. Для получения дополнительной информации см. Использование.
- унаследовать
- currentColor, значение цвета, унаследованное от родительского объекта.
- current Цвет
- То же, что и «цвет: наследование», значение цвета, унаследованное от родительского объекта.
- прозрачный
- Полностью прозрачный. Это ключевое слово можно рассматривать как сокращение для прозрачного черного, rgba (0,0,0,0), которое является его вычисленным значением.
Примеры
В следующем примере показано использование border-bottom-color
путем создания набора из 7 прямоугольников с цветами радуги, каждый из которых использует свой способ представления цветового кода. (Некоторые правила стиля опущены для краткости.)
.box {
граница: 5 пикселей сплошная #efefef;
}
. named-value {
цвет нижней границы: красный;
}
.hex-value {
цвет нижней границы: # FD6C02;
}
.rgb-value {
граница нижнего цвета: RGB (255, 255, 0);
}
.rgb-процент-значение {
цвет нижней границы: rgb (0%, 100%, 0%);
}
.hsl-value {
цвет нижней границы: hsl (240, 100%, 50%);
}
.rgba-value {
цвет нижней границы: rgba (75, 0, 130, 0,8);
}
.hsla-value {
цвет нижней границы: hsla (282, 100%, 41%, 0,8);
}
Посмотреть живой пример
Именованный цвет
красный
Шестнадцатеричный цвет
#FD6C02
Цвет RGB
rgb (255, 255, 0)
Процентный цвет RGB
rgb (0%, 100%, 0%)
Цвет HSL
HSL (240, 100%, 50%)
RGB с альфа-цветом
rgba (75, 0, 130, 0.8)
HSL с альфа-цветом
hsla (282, 100%, 41%, 0,8)
Использование
Значение цвета может быть ключевым словом свойства, расширенным ключевым словом или числовым значением. Два ключевых слова свойства: currentColor и transparent. currentColor - это значение свойства «цвет» родительского объекта. прозрачный - это сокращение от прозрачного черного, rgba (0,0,0,0).
Значение цвета также может быть числовым, например одним из следующих:
- ключевое слово основного цвета, например «красный»
- шестнадцатеричное значение, например # ff0000
- значение красно-зелено-синего (RGB), например rgb (255,0,0)
- — RGB-альфа (RGBA), включающая непрозрачность цвета, например rgba (255,0,0,1) или rgba (100%, 0%, 0%, 1)
- оттенок-насыщенность-легкость (HSL), например hsl (0, 100%, 50%)
- HSLa, например hsl (0, 100%, 50%, 1)
Значение цвета также может быть расширенным ключевым словом, например aliceblue или lavenderblush.Полный список расширенных ключевых слов см. В спецификации CSS Color Module Level 3, которая представляет собой объединение различных спецификаций.
Связанные спецификации
- CSS уровень 3 — Модуль фона и границ
- W3C кандидат в рекомендации
- CSS, уровень 2 (редакция 1)
- Рекомендация W3C
- CSS Уровень 3 — Цветовой модуль
- Рекомендация W3C
См. Также
Статьи по теме
Граница
Связанные страницы
Атрибуции
CSS цвет нижней границы
Свойство CSS border-bottom-color
позволяет вам установить цвет нижней границы элемента.
Вы также можете использовать border-color
, чтобы установить цвет для всех сторон элемента, или border-bottom
, чтобы установить все свойства для нижней границы.
Если вы используете границу без указания ее цвета, она будет использовать значение currentColor
(которое является значением свойства color
).
Перед отображением необходимо указать стиль границы. Для определения стиля границы можно использовать border-bottom-style
или border-style
.
Кроме того, ширина границы по умолчанию — , средняя
. Вы можете указать ширину, используя свойства border-bottom-width
или border-width
.
Синтаксис
border-bottom-color: <цвет>
Возможные значения
- цвет
- Задает цвет нижней границы. Это должен быть действительный цвет .
Кроме того, все свойства CSS также принимают следующие значения ключевых слов для всего CSS в качестве единственного компонента значения своего свойства:
-
начальный
- Представляет значение, указанное в качестве начального значения свойства.
-
наследовать
- Представляет вычисленное значение свойства родительского элемента.
-
снято
- Это значение действует как
наследовать
илиначальное
, в зависимости от того, унаследовано свойство или нет.Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.
Общая информация
- Начальное значение
- Использует значение
currentColor
(которое является значением свойстваcolor
). - Относится к
- Все элементы.
- Унаследовано?
- Нет
- Медиа
- Визуальный
- Анимационный
- Да (см. Пример)
Пример кода
div.bottom-color { цвет нижней границы: # ff9900; }
Официальные спецификации
CSS свойство border-bottom-color
Пример
Установите цвет нижней границы:
п
{
стиль границы: твердый;
цвет нижней границы: # ff0000;
}
Определение и использование
Свойство border-bottom-color устанавливает цвет нижней границы элемента.
Примечание: Всегда объявляйте свойство border-style до border-bottom-color свойство. Прежде чем вы сможете изменить цвет, элемент должен иметь границы.
Значение по умолчанию: | Текущий цвет элемента |
---|---|
Унаследовано: | № |
Анимация: | да. Прочитать о animatable Попробуй это |
Версия: | CSS1 |
Синтаксис JavaScript: | объект .style.borderBottomColor = «синий» Попробуй это |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Имущество | ||||||
---|---|---|---|---|---|---|
цвет нижней границы | 1,0 | 12,0 | 4.0 | 1,0 | 1,0 | 3,5 |
Синтаксис CSS
граница нижнего цвета: цвет | прозрачный | начальный | наследование;
Стоимость недвижимости
Значение | Описание | Играй |
---|---|---|
цвет | Задает цвет фона. смотреть на CSS Color Values для получения полного списка возможных значений цвета.По умолчанию color — цвет элемента | Играй » |
прозрачный | Указывает, что цвет границы должен быть прозрачным | Играй » |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальных | Играй » |
унаследовать | Наследует это свойство от своего родительского элемента.Читать о унаследовать |
Связанные страницы
Учебное пособие по CSS: Граница CSS
Ссылка CSS: свойство border-bottom
СсылкаHTML DOM: borderBottomColor свойство
CSS свойство border-bottom — Tutorial Republic
Тема: Справочник по свойствам CSS3 Пред. | След.
Описание
Свойство CSS border-bottom
устанавливает ширину, стиль и цвет нижней границы элемента. Это сокращенное свойство для установки индивидуальных свойств нижней границы, то есть border-bottom-width
, border-bottom-style
и border-bottom-color
одновременно.
В следующей таблице приведены контекст использования и история версий этого свойства.
Синтаксис
Синтаксис свойства задается следующим образом:
нижняя граница: | [ border-bottom-width, border-bottom-style, border-bottom-color ] | начальная | наследовать |
В примере ниже показано действие свойства border-bottom
.
h2 {
нижняя граница: 5 пикселей пунктирная # ff0000;
}
п {
нижняя граница: 3 пикселя с точками # 00ff00;
}
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение | Описание |
---|---|
| Устанавливает ширину нижней границы элемента. |
граница снизу | Задает стиль линии нижней границы элемента. |
цвет нижней границы | Задает цвет нижней границы элемента. |
начальный | Устанавливает для этого свойства значение по умолчанию. |
наследство | Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента border-bottom . |
Совместимость с браузером
Свойство border-bottom
поддерживается во всех основных современных браузерах.
Базовая поддержка —
|
Дополнительная литература
См. Руководство по: CSS Border, CSS3 Border.
Связанные свойства: border
, border-bottom-color
, border-bottom-style
,
border-bottom-width
.
CSS | Свойство border-bottom-color — GeeksforGeeks
CSS | border-bottom-color Свойство
Свойство CSS border-bottom-color используется для установки цвета нижней границы элемента.Обязательно объявлять свойство border-style или border-bottom-style перед использованием свойства border-bottom-color всегда, поскольку сначала должна существовать граница, прежде чем мы изменим ее цвет.
Текущее значение элемента — цвет этого свойства по умолчанию. CSS-свойство border-bottom-property можно анимировать, но не может быть унаследовано.
Синтаксис
граница нижнего цвета: цвет | прозрачный | начальный | наследование;
Значения свойств: Значения свойства border-bottom-color перечислены ниже:
- цвет: Определяет цвет нижней границы.
- transparent: Указывает, что цвет границы должен быть прозрачным.
- начальное: Используется для установки значения по умолчанию.
- inherit: Используется, когда элемент наследует это свойство от своего родительского элемента.
Пример:
|
Выход:
Поддерживаемые браузеры: Браузеры, поддерживаемые свойством border-bottom-color , перечислены ниже:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Safari 1.0
- Opera 3.5
CSS свойство border-bottom-color
Определение
Свойство CSS border-bottom-color позволяет нам указать цвет нижней границы для элемента.
Стоимость недвижимости
цвет - определяет цвет нижней границы.
Допустимые значения для ключевых слов color : бирюзовый, черный, синий, фуксия, серый, зеленый, салатовый, бордовый, темно-синий оливковый, оранжевый, фиолетовый, красный серебро, бирюзовый, белый и желтый.
Цвета также могут быть выражены в шестнадцатеричном формате или в форматах RGB.
inherit - свойства цвета фона наследуются от родительский элемент.
transparent - Прозрачная рамка, которая может иметь ширину.
Значение по умолчанию
Если цвет границы не указан, пользовательские агенты будут использовать значение свойства цвета элементов.
Наследование
Свойство border-bottom-color НЕ наследуется от родительского элемента, если оно не указано с помощью унаследовать значение свойства.
Аномалии браузера
IE5, IE6 и IE7 не поддерживают значение наследуемого свойства.
IE8 использует действительный! DOCTYPE.
IE9 + поддерживает значение наследуемого свойства.
Позиция в коробке Модель
Пример
Справочник по CSS - Свойство CSS border-bottom-color -> Просмотр свойства CSS border-bottom-color
Нижняя граница следующего изображения - бирюзовая.
Нижний цвет границы следующего изображения - салатовый.
У следующего изображения цвет нижней границы установлен на прозрачный.