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 | Визначає, чи може користувач змінювати розмір елементу |
