CSS Пользовательский интерфейс
CSS Пользовательский интерфейс
В этой главе вы узнаете о следующих свойствах пользовательского интерфейса CSS:
resizeoutline-offset
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 15.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
CSS Изменение размера
Свойство resize указывает, должен ли (и каким образом) пользователь изменять размеры элемента.
Этот элемент div может быть изменен пользователем!
Чтобы изменить размер: нажмите и перетащите нижний правый угол этого элемента div.
Примечание: Internet Explorer не поддерживает свойство resize.
Следующий пример позволяет пользователю изменять размер только ширины элемента <div>:
Следующий пример позволяет пользователю переопределять только размер высоты элемента <div>:
Следующий пример позволяет пользователю переопределять размер как высоты, так и ширины элемента <div>:
Во многих браузерах <textarea> изменяет размер по умолчанию. Здесь мы использовали свойство resize, чтобы отключить изменение размера:
CSS Смещение контура
Свойство outline-offset добавляет пространство между контуром и краем или границей элемента.
Примечание: Контур отличается от границ! В отличие от границы, контур рисуется вне границы элемента и может перекрывать другое содержимое. Кроме того, контур НЕ является частью размеров элемента; ширина и высота элемента не зависят от ширины контура.
В следующем примере используется свойство outline-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 | Указывает, может ли пользователь изменять размер элемента |
