CSS3 - Benutzeroberfläche

Mit der Eigenschaft der Benutzeroberfläche können Sie jedes Element in eines von mehreren Standardelementen der Benutzeroberfläche ändern.

Einige der allgemeinen Eigenschaften, die in der CSS3-Benutzeroberfläche verwendet werden.

Sr.Nr.	Wert & Beschreibung
1	appearance Wird verwendet, um dem Benutzer das Erstellen von Elementen als Benutzeroberflächenelemente zu ermöglichen.
2	box-sizing Ermöglicht Benutzern das eindeutige Fixieren von Elementen im Bereich.
3	icon Wird verwendet, um das Symbol im Bereich bereitzustellen.
4	resize Wird verwendet, um die Größe von Elementen zu ändern, die sich im Bereich befinden.
5	outline-offset Wird verwendet, um die Hinterlinie zu zeichnen.
6	nav-down Dient zum Abwärtsbewegen, wenn Sie die Abwärtspfeiltaste auf der Tastatur gedrückt haben.
7	nav-left Wird verwendet, um sich nach links zu bewegen, wenn Sie die linke Pfeiltaste auf der Tastatur gedrückt haben.
8	nav-right Wird verwendet, um sich nach rechts zu bewegen, wenn Sie die rechte Pfeiltaste auf der Tastatur gedrückt haben.
9	nav-up Wird verwendet, um nach oben zu gelangen, wenn Sie die Aufwärtspfeiltaste auf der Tastatur gedrückt haben.

Beispiel für eine Größenänderungseigenschaft

Die Eigenschaft "Größe ändern" hat drei gemeinsame Werte (siehe unten).

horizontal
vertical
both

Verwendung von both Wert in Resize-Eigenschaft in CSS3-Benutzeroberfläche -

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

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

Es wird das folgende Ergebnis erzeugt -

CSS3 Umrissversatz

Out line bedeutet, eine Linie um das Element außerhalb des Rahmens zu ziehen.

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

Es wird das folgende Ergebnis erzeugt -