Einführung in allgemeine neue Funktionen von CSS3

Neuer Elementselektor

E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

border-radius

auch als abgerundetes Eckenattribut bekannt, Dieses Attribut wird normalerweise zum Abrunden der Ecken von Bildern, z. B. Avataren, verwendet.

border-radius: 50%;

Eine weitere häufig verwendete Methode für den Randradius ist die CSS-Animation.

Zeilenumbruch und Textüberlauf

Das Zeilenumbruch-Attribut wird verwendet, um anzuzeigen, dass der Browser Sätze innerhalb des Wortes umbricht, um zu verhindern, dass die Zeichenfolge zu lang wird und kann es nicht finden. Der Überlauf tritt auf, wenn die natürliche Unterbrechungsperiode eintritt.

word-wrap: break-word;

text-overflow wird für Textüberlauf verwendet:

Die Implementierung der einzeiligen Abkürzung ist wie folgt:

.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

Die Implementierung der mehrzeiligen Abkürzung ist wie folgt (hauptsächlich für den Webkit-Kernel):

.multiline {
    display: -webkit-box !important;
    overflow: hidden;
    
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

background

hat hauptsächlich die folgenden drei Attribute:

• background-clip gibt an der Zeichenbereich des Hintergrunds und der Wert border -box |. content-box |

• background-origin gibt den Positionierungsbereich von an Der Hintergrund ist der Wert border |. content

• background-size gibt die Größe des Hintergrundbilds an, der Wert ist [ | | enthalten

Empfohlenes Tutorial: CSS-Schnellstart

Das obige ist der detaillierte Inhalt vonEinführung in allgemeine neue Funktionen von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!