Eine vollständige Anleitung zu einigen ungewöhnlichen, aber nützlichen CSS-Attributoperationen

::Auswahl {
  Hintergrund: rot;
  Farbe: Schwarz;
}

video::-interne-Mediensteuerung-Download-Schaltfläche {
    Anzeige: keine;
}

video::-webkit-mediensteuerung-gehäuse {
    Überlauf: versteckt;
}

video::-webkit-medien-bedienfeld {
    Breite: berechnet (100 % + 30 Pixel); 
}

/* * Sie können andere Selektoren ändern*/
*::-webkit-scrollbar {
    Breite: 2px;
  Höhe: 2px;
}
*::-webkit-scrollbar-thumb {
  Rahmenradius: 5px;
  Box-Shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
    -webkit-box-shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
  Hintergrund: #00063a;
}
*::-webkit-scrollbar-track {
  Box-Shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
    -webkit-box-shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
    Randradius: 0;
  Hintergrund: #00063a;
}

Eingabe::-WebKit-Außenspin-Button,
Eingabe::-WebKit-Inner-Spin-Button {
    -webkit-auftritt: keines;
}
Eingabe[Typ="Nummer"]{
    -moz-auftritt:Textfeld;
}

<Stil>
    .Kasten {
        Breite: 150px;
        Rand: 2px gestrichelt #fff;
        Hintergrund: linearer Farbverlauf (nach unten, #34538b, #cd0000);
        Hintergrundherkunft: Rahmenbox;
    }
    .Inhalt {
        Höhe: 100px;
        Hintergrundfarbe: #fff;
    }
</Stil>
<div Klasse="Box">
    <div Klasse="Inhalt"></div>
</div> 

<style type="text/css">
	.Inhalt { 
		Breite: 100px; 
	   	Höhe: 100px; 
	    Box-Größe: Rahmenbox; 
	    Polsterung: 5px; 
	    Randradius: 50 %; 
	    Hintergrundbild: -webkit-linear-gradient (oben, Rot 0 %, Blau 30 %, Gelb 60 %, Grün 90 %);  
	    Hintergrundbild: -moz-linear-gradient (oben, Rot 0 %, Blau 30 %, Gelb 60 %, Grün 90 %); 
	    Hintergrundbild: linearer Farbverlauf (oben, Rot 0 %, Blau 30 %, Gelb 60 %, Grün 90 %);  
	}
	.Kasten { 
		Breite: 100 %; 
	    Höhe: 100 %; 
	    Randradius: 50 %; 
	    Hintergrund:#fff; 
	}
</Stil>
<div Klasse="Inhalt">
	<div Klasse="Box"></div>
</div> 

Eingang{
    Caret-Farbe: rot;
} 

.Kasten {
    Breite: 300px; Höhe: 300px;
    Hintergrund: Kegelschnitt-Farbverlauf (ab 45 Grad, weiß, schwarz, weiß);
} 

wellig
    Anzeige: Block;
    Höhe: .5em;
    Leerzeichen: Nowrap;
    Buchstabenabstand: 100vw;
    Polsterung oben: .5em;
    Überlauf: versteckt;
}
wellig::vor {
    Inhalt: "\2000\2000";
    /* Stattdessen durchgezogene Linie im IE-Browser*/
    Textdekoration: Überstreichung;
    /* Moderne Browser */
    Textdekoration: Überlinie wellig;
} 

<style type="text/css" media="Bildschirm">
.div1{
	Breite: 0;
	Höhe: 0;
	Rand: 100px durchgezogen;
	<!--Oben rechts, unten links-->
	Rahmenfarbe: rot transparent transparent transparent;
}
</Stil>
<div Klasse="div1"></div> 

Hintergrund: URL (https://img.alicdn.com/imgextra/i4/1881744325/O1CN01JBktT81hotb8c6Py0_!!1881744325.png) Mitte, keine Wiederholung, linearer Farbverlauf (nach unten, rot, #3c3f40); 

/*Definieren Sie Breite, Höhe und Hintergrund der Bildlaufleiste. Breite und Höhe entsprechen jeweils der Größe der horizontalen und vertikalen Bildlaufleiste*/
::-webkit-scrollbar {
    Breite: 5px;
    Höhe: 5px;
    Hintergrundfarbe: rgba(245, 245, 245, 0,47);
}
 
/*Definieren Sie die Bildlaufleistenspur, den inneren Schatten und die abgerundeten Ecken*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: Einschub 0 0 6px rgba(0, 0, 0, .3);
    Rahmenradius: 10px;
    Hintergrundfarbe: #f5f5f5;
}
 
/*Schieberegler, inneren Schatten und abgerundete Ecken definieren*/
::-webkit-scrollbar-thumb {
    /*Breite: 10px;*/
    Höhe: 20px;
    Rahmenradius: 10px;
    -webkit-box-shadow: Einschub 0 0 6px rgba(0, 0, 0, .3);
    Hintergrundfarbe: rgba(85, 85, 85, 0,25);
}

Eingabe::-WebKit-Eingabe-Platzhalter { 
    /* WebKit-Browser */ 
    Schriftgröße: 14px;
    Farbe: #333;
} 
Eingabe::-moz-Platzhalter { 
    /* Mozilla Firefox 19+ */ 
    Schriftgröße: 14px;
    Farbe: #333;
} 
Eingabe: -ms-Eingabe-Platzhalter { 
    /* Internet Explorer 10+ */ 
    Schriftgröße: 14px;
    Farbe: #333;
}