CSS3 Интерфейс пользователя
CSS3 имеет новые возможности пользовательского интерфейса, такие как изменение размеров элементов, контуры, и проклейки коробки.
В этой главе вы узнаете о следующих свойствах пользовательского интерфейса:
-
resize -
outline-offset
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit- или -moz- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Не поддерживается | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Не поддерживается | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 Resizing
resize свойство определяет , должен ли элемент быть изменяемыми пользователем.
Следующий пример позволяет пользователю изменять размер только ширину <div> элемент:
Следующий пример позволяет пользователю изменять размер только высоту <div> элемент:
Следующий пример позволяет пользователю изменять размер как высоту и ширину <div> элемент:
CSS3 Outline Смещение
outline-offset свойство добавляет пространство между контуром и краем или границы элемента.
Контуры отличается от границ тремя способами:
- Контур линия, нарисованная вокруг элементов, за пределами края границы
- Контур не занимает пространство
- Контур может быть непрямоугольная
В следующем примере используется свойство контура смещения, чтобы добавить 15px пространство между границей и набросков:
пример
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Попробуй сам " Свойства пользовательского интерфейса CSS3
В следующей таблице перечислены все свойства пользовательского интерфейса:
| Имущество | Описание |
|---|---|
| box-sizing | Позволяет включать отступы и границы в общей ширины и высоты в Элементом |
| nav-down | Указывает, где для навигации при использовании навигационной клавиши со стрелкой вниз |
| nav-index | Определяет порядок табуляции для элемента |
| nav-left | Указывает, где для навигации при использовании стрелки левой навигационной клавиши |
| nav-right | Указывает, где для навигации при использовании стрелки правой клавиши навигации |
| nav-up | Указывает, где для навигации при использовании со стрелкой вверх навигационной клавиши |
| outline-offset | Добавляет пространство между контуром и краем или границы элемента |
| resize | Определяет, является ли изменяемыми пользователем элемент |