CSS пользовательский интерфейс

CSS пользовательский интерфейс

В этой главе вы узнаете о следующих CSS свойствах пользовательского интерфейса:

  • resize
  • outline-offset

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Свойство Chrome IE Firefox Safari Opera
resize 4.0 не поддерживается 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Adjust Size

resize Атрибут определяет, должен ли элемент быть изменяемым размером пользователем (и как)

Этот div элемент может быть изменен размером пользователем!

Изменение размера: щелкните и перетащите нижний правый угол этого div элемента.

Внимание:Internet Explorer не поддерживает атрибут resize.

В следующем примере пользователю разрешается изменять только ширину элемента <div>:

Пример

div {
  resize: horizontal;
  overflow: auto;
}

Попробуйте сами

В следующем примере пользователю разрешается изменять только высоту элемента <div>:

Пример

div {
  resize: vertical;
  overflow: auto;
}

Попробуйте сами

В следующем примере пользователю разрешается изменять высоту и ширину элемента <div>:

Пример

div {
  resize: both;
  overflow: auto;
}

Попробуйте сами

В многих браузерах <textarea> по умолчанию можно изменять размер. Здесь мы используем атрибут resize для disabling этой масштабируемости:

Пример

textarea {
  resize: none;
}

Попробуйте сами

Смещение контура CSS

outline-offset Атрибут добавляет пространство между контуром и краем элемента.

Этот div имеет контур в 15px за пределами края рамки.

Внимание:Контур differs от рамки! В отличие от рамки, контурная линия рисуется за пределами рамки элемента и может перекрываться другим содержимым. Кроме того, контур не является частью размеров элемента: общая ширина и высота элемента не受到影响 от ширины контурной линии.

В этом примере используется атрибут 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 Определяет, можно ли изменять размер элемента пользователем.