Heim >Web-Frontend >CSS-Tutorial >Was sind die neuen Funktionen von CSS3? Was sind die neuen Attribute? (Zusammenfassen)

Was sind die neuen Funktionen von CSS3? Was sind die neuen Attribute? (Zusammenfassen)

藏色散人
藏色散人Original
2018-09-30 16:34:446883Durchsuche

Der Hauptzweck dieses Artikels besteht darin, die neuen Funktionen von CSS3 zusammenzufassen und Ihnen vorzustellen.

Zuallererst sollte jeder wissen, was CSS ist?

Einfach ausgedrückt ist CSS ein Cascading Style Sheet, eine Computersprache, mit der Dateistile wie HTML oder XML ausgedrückt werden. Und CSS3 ist der neueste CSS-Standard. Solange wir die verschiedenen Stilattribute von CSS und CSS3 beherrschen, wird es meiner Meinung nach für jeden einfach sein, schöne und großzügige Seiten zu erstellen.

Da CSS3 der neueste CSS-Standard ist, was sind die neuen Funktionen von CSS3?

Nachfolgend kombinieren wir einfache Codebeispiele, um einige wichtige neue Funktionen, nämlich neue Attribute, zusammenzufassen!

1. RGBA und Transparenz

RGBA ist eine Erweiterung des RGB-Farbmodells. Im Wesentlichen fügt es dem Set-Element auch einen Alpha-Kanal hinzu, d. h. zusätzlich zu den drei Farben Rot, Grün und Blau wird auch ein Kanal hinzugefügt, der Transparenz darstellt, darunter RGB Die Werte stehen für Rot, Grün und Blau, während die Alpha-Werte zwischen 0 und 1 (eine Dezimalstelle) liegen.

2. Hintergrundattribut

Hintergrundbild: Legen Sie das Hintergrundbild des Elements fest.

Hintergrundursprung: Gibt den Positionierungsbereich des Hintergrundbilds an.

Hintergrundgröße: Gibt die Größe des Hintergrundbilds an.

Hintergrundwiederholung: Legen Sie fest, ob und wie das Hintergrundbild wiederholt werden soll.

3. Zeilenumbruch-Attribut

Das Zeilenumbruch-Attribut ermöglicht das Umbrechen langer Wörter oder URL-Adressen in die nächste Zeile.

Hinweis: Alle gängigen Browser unterstützen das Zeilenumbruch-Attribut.

Grundlegende Syntax:

word-wrap: normal|break-word;

4. text-shadow-Attribut

text-shadow-Attribut: Setzt einen Schatten auf den Text.

Grundlegende Syntax von Textschatten:

text-shadow: 5px 5px 5px #FF0000;

Parameter repräsentieren jeweils: horizontaler Schatten, vertikaler Schatten, Unschärfeabstand, Schattenfarbe; Attribut „font -face“

Attribut „font-face“: Definieren Sie Ihre eigene Schriftart

In der neuen @font-face-Regel müssen Sie zunächst den Namen der Schriftart definieren (z. B. myFirstFont). ) und zeigen Sie dann auf die Schriftartdatei.

6. border-radius attribute

border-radius attribute: Es handelt sich um ein abgekürztes Attribut, das zum Festlegen von vier border-*-radius-Attributen verwendet wird.

Grundlegende Syntax:

border-radius: 1-4 length|% / 1-4 length|%;

Hinweis: Mit diesem Attribut können Sie abgerundete Ränder zu Elementen hinzufügen!

7. border-image-Attribut

border-image: Gibt das Bild als Rahmen um das div-Element an

border-image grundlegende Syntax:

border-image: url(border.png) 30 30 round

8. Box-Shadow-Attribut

Box-Shadow-Attribut: Fügen Sie der Box einen oder mehrere Schatten hinzu. (Box-Shadow)

Box-Shadow-Grundsyntax:

box-shadow: 10px 10px 5px #888888

9. Medienabfrage

Medienabfrage definiert zwei CSS-Sätze im Browser Bei einer Größenänderung werden unterschiedliche Eigenschaften übernommen.

Dieser Artikel ist eine Zusammenfassung einiger wichtiger Attribute der neuen Funktionen von CSS3. In unseren CSS-Interviewfragen werden auch häufig Fragen zu den neuen Funktionen von CSS3 gestellt. Ich hoffe, dieser Artikel wird Freunden in Not hilfreich sein!

Wenn Sie mehr über CSS/CSS3-Wissenspunkte erfahren möchten, können Sie PHP Chinesisch

CSS-Video-Tutorial

/

CSS3-Video-Tutorial folgen, auf das sich jeder gerne beziehen kann und lernen!

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen von CSS3? Was sind die neuen Attribute? (Zusammenfassen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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