Latest web development tutorials

CSS3 User Interface

CSS3 User Interface

In CSS3, die Erhöhung der Zahl der neuen Funktionen der Benutzeroberfläche, die Elementgröße, Bildgröße und Außengrenzen einzustellen.

In diesem Kapitel finden Sie die folgenden Benutzeroberfläche Eigenschaften erfahren:

  • Größe ändern
  • Box-Sizing
  • outline-Offset

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.

Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.

属性
resize 4.0 不兼容 5.0
4.0 -moz-
4.0 15.0
box-sizing 10.0
4.0 -webkit-
8.0 29.0
2.0 -moz-
5.1
3.1 -webkit-
9.5
outline-offset 4.0 不兼容 5.0
4.0 -moz-
4.0 9.5

CSS3 Redimensionierung (Ändern der Größe)

In CSS3, die Größe Eigenschaft gibt an, ob ein Element sollte der Anwender die Größe anzupassen.

Das div-Element durch den Benutzer angepasst. (In Firefox 4+, Chrome und Safari,)

CSS-Code ist wie folgt:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Ein div-Element durch den Benutzer Größe angegeben:

div
{
resize:both;
overflow:auto;
}

Versuchen »


CSS3 resize (Feld Sizing)

Box-Sizing-Eigenschaft ermöglicht es Ihnen, den genauen Inhalt eines bestimmten Bereichs der Anpassung zu definieren.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Die Rückstellungen von zwei nebeneinander mit einem Rand-Block:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

Versuchen »


CSS3 modifizierte Form (outline-Offset)

outline-Offset-Eigenschaft Offsetkontur und das Profil über den Rand der Grenze zu ziehen.

Es gibt zwei verschiedene Kontur und Rahmen:

  • Contour nicht besetzen Raum
  • Es kann nicht rechteckigen Umriss sein
Dieses div außerhalb der Grenze 15 ein Konturpixel hat.

Der CSS-Code ist wie folgt:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Bestimmungen außerhalb der Konturpixel am Rand der Grenze 15:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Versuchen »


Die neuen Funktionen der Benutzeroberfläche

Immobilien Erklärung CSS
Aussehen Es ermöglicht Ihnen, das Aussehen eines Elements wie ein Standard-Elemente der Benutzeroberfläche zu machen 3
Box-Sizing Es ermöglicht Ihnen, die Region anzupassen und bestimmte Elemente in irgendeiner Weise zu definieren, 3
Symbol Die Schöpfer des Elements wird entsprechende Kapazität zu Symbol. 3
nav-down Gibt an, wo zu navigieren, wenn mit den Pfeiltasten nach unten zu navigieren 3
nav-Index Gibt an, dass ein Element der Ordnung Tab 3
nav-links Bestimmen Sie, wo die linke Pfeilnavigationstasten zum Navigieren 3
nav-Recht Bestimmen Sie, wo die rechte Pfeilnavigationstasten verwenden, um zu navigieren 3
nav-up Gibt an, wo zu navigieren, wenn mit den Pfeiltasten nach oben zu navigieren 3
outline-Offset Außenkontur Modifizierte und den Rand der Grenze ziehen über 3
Größe ändern Gibt an, ob ein Element durch den Benutzer geändert wird 3