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:
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;
}
