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 -