Was sind die neuen Attribute von CSS3? Zusammenfassung der neuen Attribute, die häufig in CSS3 verwendet werden

Was sind die neuen Attribute von CSS3? Jeder, der diese Frage stellt, sollte wissen, dass CSS3 eine aktualisierte Version von CSS ist. Da es sich bei CSS3 um eine aktualisierte Version handelt, werden Ihnen in diesem Artikel natürlich einige neue Attribute vorgestellt neue Attribute verwendet .

1. Neues Rahmenattribut in CSS3

1. Border-color, ein neues Attribut in CSS3: Legen Sie mehrere Farben für den Rahmen fest

p
  {
  border-style:solid;  
  border-color:#ff0000 #0000ff;
  }

Bitte beachten Sie als Exkurs: Das Attribut „border-width“ funktioniert nicht, wenn es alleine verwendet wird. Bitte legen Sie zunächst den Rahmen mit der Eigenschaft „border-style“ fest.

2. Border-image, ein neues Attribut von CSS3: Bildrand

Das Border-Image-Attribut von CSS3 verwendet Bilder, um Ränder zu erstellen

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Hinweis: Internet Explorer unterstützt das Attribut „border-image“ nicht; das Attribut „border-image“ gibt das als Rahmen verwendete Bild an.

3. Border-radius, ein neues Attribut in CSS3: abgerundeter Rand

div
{
border:2px solid;
border-radius:25px;
}

4. box-shadow, ein neues Attribut in CSS3: Schatteneffekt

Box-Shadow in CSS3 wird verwendet, um der Box Schatten hinzuzufügen

div
{
box-shadow: 10px 10px 5px #888888;
}

2. Neues Hintergrundattribut in CSS3

1 . Hintergrundgröße, ein neues Attribut von CSS3: Geben Sie die Größe des Hintergrundbilds an

Vor CSS3 wurde die Größe des Hintergrundbilds durch die tatsächliche Größe des Bildes bestimmt. In CSS3 können Sie die Größe des Hintergrundbilds festlegen, wodurch wir das Hintergrundbild in verschiedenen Umgebungen wiederverwenden können. Sie können Abmessungen in Pixeln oder Prozentsätzen angeben. Wenn die Abmessungen als Prozentsatz angegeben werden, beziehen sich die Abmessungen auf die Breite und Höhe des übergeordneten Elements.

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2. Background-origin, ein neues Attribut in CSS3: Geben Sie an, wo mit der Anzeige des Hintergrundbilds begonnen werden soll

Hintergrundbilder können im Inhalt platziert werden. Box- und Padding-Box- oder Border-Box-Bereich.

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3. Hintergrundclip, ein neues Attribut in CSS3: Geben Sie an, wo mit dem Zuschneiden des Hintergrundbilds begonnen werden soll

div
{
background-color:yellow;
background-clip:content-box;
}

3. Neue Texteffekte in CSS3

1. Text-Shadow, ein neues Attribut in CSS3: Text Shadow

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Beschreibung:

(1) cb8807ba8e9216f584f01e80c3172415 sind optional, wenn 45defc73b5f40c423b90a0282c3b0f91 nicht angegeben ist ;

(2) Schatten kann eine durch Kommas getrennte Liste sein, wie zum Beispiel: text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3) Der Schatteneffekt wird Die in der Schattenliste angegebene Reihenfolge wird auf die Elemente angewendet. (4) Diese Schatteneffekte können sich gegenseitig überlappen, überlappen jedoch nicht den Text selbst. (5) Der Schatten kann bis zum Container außerhalb der Grenzen verlaufen, hat jedoch keinen Einfluss auf die Größe des Containers.

2. Zeilenumbruch, ein neues Attribut in CSS3: automatischer Zeilenumbruch

Wenn ein Wort zu lang ist, darf es eine bestimmte Länge nicht überschreiten Wörter, die geteilt werden sollen, und in die nächste Zeile umbrechen

p {word-wrap:break-word;}

4. Neue Animationseffekte in CSS3

1. Transformationseffekt transformieren:

CSS3 bietet Elementverformungseffekte, auch Transformationen genannt. Es kann Elemente drehen, skalieren und verschieben.
Attributwert:

(1) transform (2) transform-origin: Das Attribut transform-origin kann den Startpunkt der Transformation festlegen. Standardmäßig wird die Mitte des Elements als Startpunkt verwendet.

2. Animationseffekt

CSS3 bietet Animationseffekte ähnlich der Flash-Keyframe-Steuerung, die durch das Animationsattribut erreicht wird. Dann kann das vorherige Übergangsattribut Animationseffekte nur durch Angabe des Anfangs- und Endzustands des Attributs erzielen, was bestimmte Einschränkungen aufweist. Animation Die Realisierung von Animationseffekten besteht hauptsächlich aus zwei Teilen: 1. Deklarieren einer Animation durch Schlüsselbilder ähnlich der Flash-Animation 2. Aufrufen der durch Schlüsselbilder deklarierten Animation im Animationsattribut;

5. Neue Übergangseffekte in CSS3

1. Übergangsübergangseffekte

Übergangseffekte werden im Allgemeinen übergeben durch Einige einfache CSS-Aktionen lösen reibungslose Übergangsfunktionen aus, z. B. :hover, :focus, :active, :checked usw. CSS3 stellt das Übergangsattribut zur Implementierung dieser Übergangsfunktion bereit.

Informationen zu den neuen Übergangsinhalten und neuen Animationseffekten von CSS3 finden Sie auch im CSS3-Referenzhandbuch für die neueste Version

. Der Inhalt ist sehr detailliert.

Dieser Artikel endet hier. Das Obige ist eine Zusammenfassung der neuen allgemeinen Attribute in CSS3.

Verwandte Empfehlungen:

Was sind die neuen Hintergrundattribute von CSS3

Was sind die neuen Hintergrundattribute von CSS3 und deren Verwendung

Das obige ist der detaillierte Inhalt vonWas sind die neuen Attribute von CSS3? Zusammenfassung der neuen Attribute, die häufig in CSS3 verwendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!