Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Расположение и границы : border-color
смотрим также
Материал из Справочник Web-языков
Содержание |
Атрибут border-color | Свойство borderColor
Это свойство устанавливает цвет границ с разных сторон элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
Синтаксис
| HTML | { border-color : sColor } |
| Скрипты | [ sColor = ] object.style.borderColor |
Возможные значения
- sColor
- Строка, которая может определять и принимать одно или несколько из следующих значений:
transparent Устанавливает прозрачный цвет color Задается до четырех названий цветов или RGB-кодов из таблицы Коды и названия цветов в HTML
Свойство borderBottomColor не наследуется, то есть должно быть определено отдельно для каждого элемента.
У свойства borderBottomColor нет значения по умолчанию.
Замечания
При задании до четырех значений цвета, они в соответствии с порядком перечисления задаются для следующих элементов: верхняя граница элемента, правая граница элемента, нижняя граница элемента, левая граница элемента. Если задано только одно значение цвета, то оно применяется сразу для всех границ элемента. Если задано два значения цвета, то первое применяется для верхней и нижней границ элемента, а второе - для левой и правой. Если задано три значения цвета, то, соответственно, первое применяется для верхней границы элемента, второе - для левой и правой, а третье - для нижней границы элемента.
В Internet Explorer 5.5 borderColor применяется для строковых объектов. В ранних версиях Windows Internet Explorer строковые объекты должны были быть описаны с помощью position: absolute, чтобы использовать это свойство. Формат элемента устанавливается путем задания значений свойствам height и width.
Если для свойства borderStyle установлено значение none, то значение свойства borderColor игнорируется.
Некоторые браузеры не поддерживают задание цвета в виде текстового названия, но все браузеры поддерживают задание цвета с помощью RGB-кода и, в этом случае, отображают цвет корректно.
Примеры
Следующие примеры иллюстрируют применение свойства borderColor и атрибута border-color для задания цвета границам объекта.
В первом примере используется атрибут border-color для задания цвета границам элемента. Цвет ячейки таблицы будет меняться с красного на синий при наведении курсора мыши на изображение.
<head>
<style type="text/css">
TD {
border-color: red;
border-width: 0.5cm;
}
.blue {
border-color: blue;
}
</style>
</head>
<body>
<table border="">
<tr>
<td onmouseover="this.className='blue'" onmouseout="this.className=''">
<img alt="sphere" src="sphere.jpg"> </td>
</tr>
</table>
</body>
Во втором примере для подсветки изображения синим цветом при наведении на него курсора мыши применяется свойство borderColor.
<td onmouseover="this.style.borderWidth='0.5cm';
this.style.borderColor='blue';
this.style.borderStyle='solid'">
В третьем примере используется атрибут border-color для изменения цвета ссылок с прозрачного на золотой при наведении на них курсора мыши. Описанный пример будет работать корректно в браузере Internet Explorer версии 7 или выше.
<head>
<style type="text/css">
a:link, a:visited {
border-style: solid;
border-width: 10px;
border-color: transparent;
}
a:hover {
border-style: ridge;
border-width: 10px;
border-color: gold;
}
</style>
</head>
<body>
<a href="#">Yes.</a> <a href="#">No.</a> <a href="#">Maybe so.</a>
Стандарты
Это свойство определено в Cascading Style Sheets (CSS), Level 1 (CSS1)
Поддерживаемые браузеры
Internet Explorer 8.0, частично в версиях 6.0 и 7.0
Opera 8.0, 9.2, 9.5
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
Смотри также
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms533516(VS.85).aspx
