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 размер

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 за пределами края рамки.

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

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