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