CSS3 - interfejs użytkownika

Właściwość interfejsu użytkownika umożliwia zmianę dowolnego elementu w jeden z kilku standardowych elementów interfejsu użytkownika.

Niektóre z typowych właściwości używanych w interfejsie użytkownika css3.

Sr.No.	Wartość i opis
1	appearance Służy do umożliwienia użytkownikowi tworzenia elementów jako elementów interfejsu użytkownika.
2	box-sizing Umożliwia użytkownikom mocowanie elementów na terenie w przejrzysty sposób.
3	icon Służy do wyświetlania ikony w obszarze.
4	resize Służy do zmiany rozmiaru elementów znajdujących się na obszarze.
5	outline-offset Służy do rysowania konturu za.
6	nav-down Służy do poruszania się w dół po naciśnięciu przycisku strzałki w dół na klawiaturze.
7	nav-left Służy do poruszania się w lewo po naciśnięciu przycisku strzałki w lewo na klawiaturze.
8	nav-right Służy do poruszania się w prawo po naciśnięciu przycisku strzałki w prawo na klawiaturze.
9	nav-up Służy do poruszania się w górę po naciśnięciu przycisku strzałki w górę na klawiaturze.

Przykład właściwości zmiany rozmiaru

Właściwość Resize ma trzy wspólne wartości, jak pokazano poniżej -

horizontal
vertical
both

Korzystanie z both wartość we właściwości resize w interfejsie użytkownika 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>

To da następujący wynik -

Przesunięcie konturu CSS3

Linia zewnętrzna oznacza narysowanie linii wokół elementu na zewnątrz granicy.

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

To da następujący wynik -