Пользовательский интерфейс CSS
Пользовательский интерфейс CSS
В этой главе вы узнаете о следующих свойствах пользовательского интерфейса CSS:
resizeoutline-offset
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Изменение размера CSS
Свойство resizeуказывает, должен ли (и каким образом) размер элемента изменяться пользователем.
Пользователь может изменять размер этого элемента div!
Чтобы изменить размер: Нажмите и перетащите правый нижний угол этого элемента div.
В следующем примере пользователь может изменить размер только ширины элемента <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добавляет пространство между контуром и краем или границей элемента.
Примечание. Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур НЕ является частью размеров элемента; общая ширина и высота элемента не зависит от ширины контура.
В следующем примере это 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
В следующей таблице перечислены все свойства пользовательского интерфейса:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |