CSS User Interface
Пользовательский интерфейс CSS
В этой главе вы узнаете о следующих свойствах пользовательского интерфейса CSS:
resize
outline-offset
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера -WebKit- или -МОЗ- укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
resize | 4.0 | Not supported | 5.0 4.0 -moz- |
4.0 | 15.0 |
outline-offset | 4.0 | Not supported | 5.0 4.0 -moz- |
4.0 | 9.5 |
Изменение размера CSS
Свойство resize
указывает, следует ли изменять размер элемента пользователем.
Этот элемент div изменяется пользователем!
Чтобы изменить размер: щелкните и перетащите правый нижний угол этого элемента div.
Примечание: Обозреватель Internet Explorer не поддерживает свойство изменить размер.
Следующий пример позволяет пользователю изменять размер только ширины элемента <div>:
Пример
div
{
resize: horizontal;
overflow: auto;
}
Следующий пример позволяет пользователю изменять размер только высоты элемента <div>:
Пример
div
{
resize: vertical;
overflow: auto;
}
Следующий пример позволяет пользователю изменять размер как высоты, так и ширины элемента <div>:
Пример
div
{
resize: both;
overflow: auto;
}
Во многих браузерах <textarea> изменяется по умолчанию. Здесь мы использовали свойство Resize для отключения ресизабилити:
Пример
textarea {
resize: none;
}
Смещение структуры CSS
Свойство outline-offset
добавляет пространство между контуром и краем или границей элемента.
Контуры отличаются от границ тремя способами:
- Контур — это линия, обрисованная вокруг элементов, за пределами края границы
- Контур не занимает место
- Контур может быть не прямоугольным
В следующем примере свойство offset структуры используется для добавления пространства между границей и контуром:
Пример
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
Свойства пользовательского интерфейса CSS
В следующей таблице перечислены все свойства пользовательского интерфейса:
Свойство | Описание |
---|---|
outline-offset | Добавление пространства между контуром и краем или границей элемента |
resize | Указывает, является ли элемент изменяемым по размерам пользователем |