CSS3 - Пользовательский интерфейс

Свойство пользовательского интерфейса позволяет вам преобразовать любой элемент в один из нескольких стандартных элементов пользовательского интерфейса.

Некоторые из общих свойств, которые используются в пользовательском интерфейсе css3.

Sr. No.	Значение и описание
1	appearance Используется, чтобы позволить пользователю создавать элементы как элементы пользовательского интерфейса.
2	box-sizing Позволяет пользователям четко фиксировать элементы на площади.
3	icon Используется для отображения значка в области.
4	resize Используется для изменения размеров элементов, находящихся в области.
5	outline-offset Используется для рисования контура позади.
6	nav-down Используется для перемещения вниз при нажатии кнопки со стрелкой вниз на клавиатуре.
7	nav-left Используется для перемещения влево при нажатии кнопки со стрелкой влево на клавиатуре.
8	nav-right Используется для перемещения вправо при нажатии кнопки со стрелкой вправо на клавиатуре.
9	nav-up Используется для перемещения вверх при нажатии кнопки со стрелкой вверх на клавиатуре.

Пример свойства resize

Свойство Resize имеет три общих значения, как показано ниже -

horizontal
vertical
both

Использование both значение свойства resize в пользовательском интерфейсе css3 -

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint.com</div>
   </body>
</html>

Это даст следующий результат -

CSS3 смещение контура

Out line означает рисование линии вокруг элемента за пределами границы.

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint</div>
   </body>
</html>

Это даст следующий результат -