CSS3 - Interface do usuário

A propriedade da interface do usuário permite que você altere qualquer elemento em um dos vários elementos da interface do usuário padrão.

Algumas das propriedades comuns que estão sendo usadas na interface do usuário css3.

Sr. Não.	Valor e descrição
1	appearance Usado para permitir que o usuário crie elementos como elementos da interface do usuário.
2	box-sizing Permite aos usuários fixar elementos na área de forma clara.
3	icon Usado para fornecer o ícone na área.
4	resize Usado para redimensionar elementos que estão na área.
5	outline-offset Usado para desenhar atrás do contorno.
6	nav-down Usado para mover para baixo quando você pressiona o botão de seta para baixo no teclado.
7	nav-left Usado para mover para a esquerda quando você pressiona o botão de seta para a esquerda no teclado.
8	nav-right Usado para mover para a direita quando você pressiona o botão de seta para a direita no teclado.
9	nav-up Usado para mover para cima quando você pressiona o botão de seta para cima no teclado.

Exemplo de propriedade de redimensionamento

A propriedade Resize tem três valores comuns, conforme mostrado abaixo -

horizontal
vertical
both

Uso de both valor na propriedade resize na interface do usuário 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>

Isso produzirá o seguinte resultado -

Deslocamento de contorno CSS3

Linha externa significa desenhar uma linha ao redor do elemento fora da borda.

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

Isso produzirá o seguinte resultado -