CSS3-Tutorial – Benutzeroberfläche

Hallo! Liebe Front-End-Entwicklungsfreunde, vielen Dank, dass Sie mich immer begleiten. Das heutige CSS3-Tutorial-Benutzeroberfläche ist der letzte Artikel des CSS3-Tutorials.

CSS3 stellt erneut einzigartige Rendering-Attribute für die Website-Oberfläche bereit. In diesem Artikel wird es Ihnen ausführlich vorgestellt.

CSS3-Benutzeroberfläche:

In CSS3 gehören zu den neuen Funktionen der Benutzeroberfläche die Größenänderung von Elementen, Boxgrößen und Umrissen.

In diesem Kapitel lernen Sie die folgenden Eigenschaften der Benutzeroberfläche kennen:

2 -Offset.

Browserunterstützung:

Firefox, Chrome und Safari unterstützen das Größenänderungsattribut.

Internet Explorer, Chrome, Safari und Opera unterstützen das Box-Sizing-Attribut. Firefox erfordert das Präfix -moz-.

Alle gängigen Browser unterstützen die Outline-Offset-Eigenschaft außer Internet Explorer.

CSS3-Größenänderung:

In CSS3 gibt das Resize-Attribut an, ob die Größe eines Elements vom Benutzer geändert werden kann.

Der CSS-Code lautet wie folgt:

Beispiel:

Gibt an, dass die Größe des p-Elements vom Benutzer geändert werden kann:

CSS3-Boxgröße: Mit der Eigenschaft

box-sizing können Sie genau definieren, wie Inhalte in einen bestimmten Bereich passen.

p
{
resize:both;
overflow:auto;
}

Beispiel:

Gibt zwei nebeneinander umrandete Felder an:

CSS3 Outline Offset:

Die Eigenschaft „outline-offset“ steuert die Umriss Versatz und zeichnen Sie den Umriss über den Rand des Rahmens hinaus.

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

Es gibt zwei Unterschiede zwischen Umrissen und Rändern:

1. Der Umriss nimmt möglicherweise keinen Platz ein.

Der CSS-Code lautet wie folgt:

Beispiel:

Gibt den Umriss 15 Pixel außerhalb des Randrandes an:

Neue Benutzeroberflächeneigenschaften:

Die folgende Tabelle listet alle Transformationseigenschaften auf:

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

Das war’s für das CSS3-Tutorial – Benutzer Schnittstelle: Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!