Другое CSS3

В этом учебнике мы узнаем о некоторых интересных функциях CSS3.

Использование CSS3 для расширения пользовательского интерфейса

В этой главе мы будем обсуждать некоторые интересные свойства CSS3, связанные с пользовательским интерфейсомresize，outline-offsetи т.д., вы можете использовать его для улучшения вашего веб-сайта.

Изменение размера элементов

Вы можете использовать атрибут resize CSS3 для изменения размера элементов в горизонтальном, вертикальном или двунаправленном направлениях. Однако, этот атрибут обычно используется для<textarea>Удаление-default поведения изменения размера в элементах формы.

p,　div,　textarea　{
　　　　width:　300px;
　　　　min-height:　100px;
　　　　overflow:　auto;
　　　　border:　1px　solid　black;
}
p　{
　　　resize:　horizontal;　
}
div　{
　　　　resize:　both;
}
textarea　{
　　　　resize:　none;
}

Установка смещения контура

В предыдущем разделе вы узнали, как устанавливать различные свойства контура, такие как ширина, цвет и стиль. Однако, CSS3 предоставляет другой атрибут, outline-offset, который используется для установки пространства между контуром и границей элемента. Этот атрибут может принимать отрицательные значения, что означает, что вы также можете đặt контур внутри элемента.

p,　div　{
　　　　margin:　50px;
　　　　height:　100px;
　　　　background:　#000;
　　　　outline:　2px　solid　red;
}
p　{
　　　　outline-offset:　10px;
}
div　{
　　　　outline-offset:　-15px;
}