CSS3 User Interface
CSS3 hat neue Funktionen der Benutzeroberfläche wie Ändern der Größe Elemente, Gliederungen und Box Sizing.
In diesem Kapitel werden Sie über die folgende Benutzeroberfläche Eigenschaften erfahren:
-
resize -
outline-offset
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit- oder -moz- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Nicht unterstützt | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Nicht unterstützt | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 Ändern der Größe
Die resize - Eigenschaft gibt an, ob ein Element vom Anwender veränderbar sein sollte.
Im folgenden Beispiel kann der Benutzer die Größe nur die Breite eines <div> Element:
Im folgenden Beispiel kann der Benutzer die Größe nur die Höhe einer <div> Element:
Im folgenden Beispiel kann der Benutzer die Größe sowohl die Höhe und die Breite eines <div> Element:
CSS3 Kontur Offset
Die outline-offset - Eigenschaft fügt Raum zwischen einem Umriss und dem Rand oder Rand eines Elements.
Outlines unterscheiden sich von Grenzen auf drei Arten:
- Ein Entwurf ist eine Linie um Elemente gezogen, außerhalb der Randkante
- Ein Entwurf nehmen nicht Raum
- Eine Gliederung kann nicht rechteckigen
Im folgenden Beispiel wird die Kontur-Offset-Eigenschaft einen 15px Raum zwischen der Grenze und dem Umriss hinzuzufügen:
Beispiel
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Versuch es selber " CSS3 User Interface Properties
Die folgende Tabelle listet alle Benutzeroberfläche Eigenschaften:
| Eigentum | Beschreibung |
|---|---|
| box-sizing | Hier können Sie die Polsterung und Grenze in eines Elements Gesamtbreite aufzunehmen und Höhe |
| nav-down | Gibt an, wo zu navigieren, wenn auf den Pfeil nach unten Navigationstaste |
| nav-index | Gibt die Tabulatorreihenfolge für ein Element |
| nav-left | Gibt an, wo zu navigieren, wenn der Pfeil-Links-Navigationstaste |
| nav-right | Gibt an, wo zu navigieren, wenn der Pfeil-Rechts-Navigationstaste |
| nav-up | Gibt an, wo zu navigieren, wenn der Pfeil-up-Navigationstaste |
| outline-offset | Fügt Raum zwischen einem Umriss und dem Rand oder Rand eines Elements |
| resize | Gibt an, ob nicht ein Element durch den Benutzer geändert werden kann |