В этом разделе мы обсудим некоторые интересные свойства CSS3, связанные с пользовательским интерфейсом, такие как resize
, outline-offset
и т. д., которые вы можете использовать для улучшения своих веб-страниц.
Свойство resize
Вы можете изменить размер элемента по горизонтали, вертикали или в обоих направлениях с помощью свойства CSS3 resize
. Однако это свойство обычно используется для удаления поведения по умолчанию для элементов с изменяемыми размерами, например <textarea>
.
p, div, textarea {
width: 300px;
min-height: 100px;
overflow: auto;
border: 1px solid black;
}
p {
resize: horizontal;
}
div {
resize: both;
}
textarea {
resize: none;
}
Свойство outline-offset
В предыдущем разделе мы разобрали, как установить различные свойства для контуров, такие как ширина, цвет и стили. Тем не менее, CSS3 предлагает еще одно свойство outline-offset
для установки пространства между контуром и границей элемента. Это свойство может принимать отрицательное значение, что означает, что вы также можете переместить контур внутрь элемента.
p, div {
margin: 50px;
height: 100px;
background: #000;
outline: 2px solid red;
}
p {
outline-offset: 10px;
}
div {
outline-offset: -15px;
}