Welche neuen Attributstile werden CSS3 hinzugefügt? Einführung in häufig verwendete neue Funktionen von CSS3

Was sind die neuen Attributstile (neue Funktionen) von CSS3? Dieses Kapitel konzentriert sich auf die Einführung mehrerer neuer Attributstile (neuer Funktionen), die häufig in CSS3 verwendet werden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Bevor wir die neuen Attributstile (neue Funktionen) von CSS3 einführen, müssen wir zunächst wissen, was CSS3 ist.

CSS ist die Abkürzung für Cascading Style Sheets.
CSS ist eine Auszeichnungssprache, die vom Browser interpretiert wird und ohne Kompilierung direkt vom Browser ausgeführt werden kann.
CSS ist eine Auszeichnungssprache, die zur Darstellung von HTML oder XML verwendet wird.
CSS wird von der W3C CSS Working Group empfohlen und gepflegt.
CSS ist ein Pflichtkurs für Programmieranfänger. Die Verwendung von CSS-Stilen kann die Seite schön machen.
Die CSS-Syntax besteht aus drei Teilen: Selektor, Eigenschaft und Wert, zum Beispiel: Selektor {Eigenschaft: Wert}.

CSS3 ist der neueste CSS-Standard, der einige neue Attributstile hinzufügt, bei denen es sich um neue Funktionen handelt. Im Folgenden stellen wir einige häufig verwendete neue Funktionen (Attributstile) in CSS3 vor:

1. Border

border-image-Attribut : Es handelt sich um ein Kurzschriftattribut, mit dem das Kurzschriftattribut aller border-image-*-Attribute festgelegt wird.

Border-Radius-Attribut: ist ein Kurzattribut, das zum Festlegen von vier Border-*-Radius-Attributen verwendet wird.

border-top-left-radius Legt die obere linke Ecke fest
border-top-right-radius Legt die obere rechte Ecke fest
border-bottom-right-radius Legt die untere linke Ecke fest
border-bottom-right -radius legt die untere rechte Ecke fest
border-top-left-radius: x y; Prozentsätze und Pixel festlegen.

Grenzradius:;
Ein Wert repräsentiert oben links, oben rechts, unten links und unten rechts, alle
Zwei Werte repräsentieren den ersten Wert oben links und unten rechts. Der zweite Wert repräsentiert oben rechts und unten links
Die drei Werte stellen dar: Der erste ist oben links, der zweite Wert ist oben rechts und unten links, der dritte Wert ist unten rechts
und die vier sind jeweils oben links, oben rechts, unten rechts und unten links.

border-radius 0 0 0 0/ 0 0 0 0;
Die ersten vier sind die x-Achsen-Versatze in x-Richtung und die letzten vier sind die Versätze in y-Achsen-Richtung

Box-Shadow-Eigenschaft: Fügen Sie der Box einen oder mehrere Schatten hinzu.

Syntax: box-shadow: value
Wertbeschreibung:
(1) Der erste Wert: Npx, der Schatten wird in horizontaler Richtung um N Pixel versetzt, positive Zahlen gehen nach rechts, negative Zahlen gehen nach links
(2) Der zweite Wert: Npx, der Schatten wird in vertikaler Richtung um N Pixel versetzt, positive Zahlen gehen nach unten, negative Zahlen gehen nach oben
(3) Der dritte Wert: Federgröße (unscharfe Größe)
(4) Der vierte Wert: Schattengröße
(5) Der fünfte Wert: Farbe. Der Standardwert ist Schwarz
(6) Der sechste Parameter: innerer und äußerer Schatten. Der Standardwert ist äußerer Schatten. Der innere Schatten ist eingefügt (7) Sie können mehrere Schatten schreiben, getrennt durch Kommas
(8) Der Schatten kann abgekürzt werden, es ist jedoch zu beachten, dass einige Werte mit 0 gefüllt werden müssen

Umfassendes Beispiel:

p{
    border: 2px solid red;
    border-radius:25px; /* 创建圆角，100%为圆形 */
    box-shadow: 10px 10px 5px #888888；
}

2. Hintergrund

Hintergrundgrößenattribut: Gibt die Größe des Hintergrundbilds an. (Wichtiges Attribut)

Syntax: Hintergrundgröße: Wert

Wertbeschreibung:

(1) Wenn nur ein Wert vorhanden ist, wird die Breite gestreckt und die Höhe bleibt proportional. Der Prozentsatz bezieht sich auf die Breite und Höhe des Felds selbst (2) Wenn zwei Werte vorhanden sind, werden Breite und Höhe auf die entsprechenden Werte gestreckt und können px oder Prozentwerte unterstützen. Der Prozentsatz bezieht sich auf die Breite und Höhe der Box selbst > (3) enthalten Wenn die Breite oder Höhe des Bildes beim Skalieren den Rand der Box „berührt“, wird die Änderung gestoppt (Breite oder Höhe müssen nur eins erfüllen)
(4) Stellen Sie anhand des Inhalts sicher, dass kein Leerraum vorhanden ist. Dies ist der Effekt der Abdeckung (sowohl Breite als auch Höhe müssen erfüllt sein)


Hintergrundursprungsattribut

: Gibt den Positionierungsbereich des Hintergrundbilds an.

Syntax: Hintergrund-Ursprung: Wert

Wertbeschreibung:
(1) Randfeld: Ignorieren Sie den Rand und kacheln Sie direkt vom Startpunkt des Randes 0, 0 Punkt

(2) Padding-Box: Standardwert, Polsterung ignorieren und direkt vom Startpunkt der Polsterung aus kacheln 0, 0 Punkt

(3) Inhaltsfeld: Kachel beginnend mit dem Inhaltsteil, bezogen auf die Polsterung


Hintergrundbildattribut

: Legen Sie das Hintergrundbild des Elements fest.

Hintergrundwiederholungsattribut

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

3. Texteffekt

text-align-last-Attribut: Legen Sie fest, wie die letzte Zeile oder die Zeile unmittelbar vor der erzwungenen Zeile ausgerichtet werden soll brechen .

text-emphasis属性：向元素的文本应用重点标记以及重点标记的前景色。

text-justify属性：规定当 text-align，设置为“justify”时所使用的对齐方法。

text-outline属性：规定文本的轮廓。

text-overflow属性：规定当文本溢出包含元素时发生的事情。

text-shadow属性：向文本添加阴影。

text-wrap属性：规定文本的换行规则。

word-wrap属性：允许对长的不可分割的单词进行分割并换行到下一行。

四、颜色与透明度

rgba（）

R:Red、G:Green、B:Blue、A:Alpha，R、G、B 取值范围0~255，A的取值范围是0-1。

RGBA可以用于所有使用颜色的地方
rgb三个值越小，颜色越黑
如果是纯色的背景，可以是使用rgba
如果是图片，可以脱离父子关系，让后用定位的方式来做。

hsla（）

H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度取值范围0~1

例：

background-color: hsla(120,100%,50%,1);

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

Das obige ist der detaillierte Inhalt vonWelche neuen Attributstile werden CSS3 hinzugefügt? Einführung in häufig verwendete neue Funktionen von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!