CSS3 — интерфейс пользователя

Поділитись

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

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

Sr.No.	Значение и описание
1	внешний видИспользуется, чтобы позволить пользователю создавать элементы как элементы пользовательского интерфейса.
2	коробчатого проклейкиПозволяет пользователям четко фиксировать элементы на участке.
3	значокИспользуется для предоставления значка в области.
4	изменить размерИспользуется для изменения размера элементов, которые находятся на области.
5	очертить смещениеИспользуется для рисования контура позади.
6	нав внизИспользуется для перемещения вниз, когда вы нажали кнопку со стрелкой вниз на клавиатуре.
7	нав налевоИспользуется для перемещения влево при нажатии кнопки со стрелкой влево на клавиатуре.
8	нав-правоИспользуется для перемещения вправо, когда вы нажали на кнопку со стрелкой вправо на клавиатуре.
9	нав вверхИспользуется для перемещения вверх, когда вы нажали кнопку со стрелкой вверх на клавиатуре.

внешний вид

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

коробчатого проклейки

Позволяет пользователям четко фиксировать элементы на участке.

значок

Используется для предоставления значка в области.

изменить размер

Используется для изменения размера элементов, которые находятся на области.

очертить смещение

Используется для рисования контура позади.

нав вниз

Используется для перемещения вниз, когда вы нажали кнопку со стрелкой вниз на клавиатуре.

нав налево

Используется для перемещения влево при нажатии кнопки со стрелкой влево на клавиатуре.

нав-право

Используется для перемещения вправо, когда вы нажали на кнопку со стрелкой вправо на клавиатуре.

нав вверх

Используется для перемещения вверх, когда вы нажали кнопку со стрелкой вверх на клавиатуре.

Пример изменения размера собственности

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

горизонтальный
вертикальный
и то и другое

Использование обоих значений в свойстве 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 Outline offset
Out line означает провести линию вокруг элемента на внешней границе.

 Live Demo

<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>

Поділитись