outline-width
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|||
6.0 |
7.0 |
|
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
|
Нет |
|
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS2, CSS2.1 |
|
medium |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
Ко всем элементам |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
http://www.w3.org/TR/CSS21/ui.html#propdef-outline-width |
Ссылка на спецификацию |
|
|
|
Описание
Задает толщину внешней границы элемента. В отличие от свойства border-width, для outline-width нельзя устанавливать границу для каждой стороны элемента индивидуально.
Чтобы outline-width работал, необходимо установить у свойства outline-style любое значение кроме none.
Синтаксис
outline-width: thin | medium | thick | значение | inherit
Значения
thin |
Тонкая линия. Значение в пикселахможет изменяться в зависимости от браузера, но обычно |
|
составляет 1 пиксел. |
medium |
Линия средней толщины (3 пиксела). |
thick |
Линия большой толщины (6 пикселов). |
значение |
Для точной установки толщины можно использовать любые единицы размера принятые в |
|
CSS. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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>outline-width</title>
<style type="text/css"> #block {
outline-style: dotted; /* Пунктирная внешняя граница */ outline-width: 3px; /* Толщина внешней границы */ padding: 10px; /* Поля вокруг текста */
border: 3px dotted #000; /* Параметры рамки */
}
</style>
</head>
<body>
<div id="block">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Использование свойства outline-width
Объектная модель
[window.]document.getElementById("elementID")style.outlineWidth
overflow
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
||
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Частично |
|
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS2 |
|
visible |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
К блочным элементам |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow |
Ссылка на спецификацию |
|
|
|
Описание
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden | scroll | visible | inherit
Значения
visible |
Отображается все содержание элемента, даже за пределами установленной высоты и |
|
ширины. |
hidden |
Отображается только область внутри элемента, остальное будет скрыто. |
scroll |
Всегда добавляются полосы прокрутки. |
auto |
Полосы прокрутки добавляются только при необходимости. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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>overflow</title>
<style type="text/css">
.layer {
overflow: scroll; /* Добавляем полосы прокрутки */ width: 300px; /* Ширина блока */
height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */
border: solid 1px black; /* Параметры рамки */
}
</style>
</head>
<body>
<div class="layer">
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства oveflow
Объектная модель
[window.]document.getElementById("elementID").style.overflow
Браузеры
Браузер Internet Explorer поддерживает также свойство overflow-x, которое отображает полосу прокрутки по горизонтали и overflow-y, оно отвечает за полосу прокрутки по вертикали. Значения те же, что и для overflow.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.