Веб Навсегда.инфоCSS-стили → BORDER-BOTTOM-COLOR

Реклама


!!! Ваша ссылка здесь всего за 10 руб в месяц на всех страницах сайта!!!

BORDER-BOTTOM-COLOR

Описание элемента

Задаёт цвет границы (бордюра) элемента снизу.

Выше мы уже рассмотрели свойство BORDER-BOTTOM, которое задаёт цвет, толщину и стиль рамки снизу. Но эти параметры можно задать и по отдельности, а не все вместе!

Синтаксис

Элемент { border-bottom-сolor:"цвет" }

Возможные аргументы

  1. Цвет по названию
    Можно указать название цвета, например Red, DarkGreen и т.д.
     
  2. Шестнадцатеричное значение в формате RGB.
    Это очень распространенный и наиболее универсальный вариант. Возможно вы видели, как какой-нибудь цвет обозначают примерно так: #AF9F1C. Это и есть шестнадцатеричный формат. В нём есть 4 составляющие:
     1) В начале идёт символ #
     2) Следующие 2 символа обозначают долю красного цвета (Red)
     3) Затем идут 2 символы обозначающие долю зелёного цвета (Green)
     4) И последние 2 символа указывают долю синего цвета (Blue)
    Так же разрешается использовать сокращённую форму #RGB, где каждый цвет будет удваиваться (т.е. например #A9C, будет восприниматься браузером как #AA99CC)
     
  3. RGB формат
    А можно и просто в формате RGB, при этому необходимо использовать такой синтаксис: RGB(значение, значение, значение), где значение - это число от 0 до 255 обозначающее соответственно долю цвета (Первое - это красный, второй - зелёный и третий - синий).

ВНИМАНИЕ:
При использовании BORDER-BOTTOM-COLOR обязательно указывайте BORDER-BOTTOM-STYLE, иначе граница отображаться не будет!

Примеры использования

Пример использования BORDER-BOTTOM-COLOR

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования BORDER-BOTTOM-COLOR</title>
<style type="text/css">
DIV.good
{
border-bottom-width: 5px;
border-bottom-color: blue;
border-bottom-style: solid; /* Обязательно указывайте стиль линии, иначе граница отображаться не будет! */
}

DIV.bad
{
border-bottom-width: 5px;
border-bottom-color: blue;
}
</style>
</head>
<body>

<div class="good">
Собственно вот вам пример <b>BORDER-BOTTOM-COLOR</b>`а синим цветом!<br>
Как видите, всё прекрасно работает...
</div>
<br>
<div class="bad">
А вот есть не указывать <b>BORDER-BOTTOM-STYLE</b>, то граница отображаться не будет!
</div>

</body>
</html>

И вот как это будет выглядеть:
Пример использования BORDER-BOTTOM-COLOR