Heim > Web-Frontend > CSS-Tutorial > 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? Zusammenfassung der neuen Attribute, die häufig in CSS3 verwendet werden

不言
Freigeben: 2018-08-30 15:41:16
Original
18650 Leute haben es durchsucht

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;
  }
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

3. Neue Texteffekte in CSS3

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

h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Nach dem Login kopieren

Beschreibung:

(1) sind optional, wenn 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;}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage