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:

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.

Beispiel:

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

p
{
resize:both;
overflow:auto;
}

Beispiel:

Gibt zwei nebeneinander umrandete Felder an:

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.

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

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