Neue Attribute in CSS3 (nachgedruckt)

Vorne geschrieben:

Da der CSS5-Standard noch nicht vollständig finalisiert ist, haben Browser verschiedener Kerne ihre eigenen Standards. Um Attribute nicht zu verwechseln, fügt jeder Browser seinem jeweiligen Standard ein Präfix hinzu,

Zum Beispiel: -moz- Hauptsächlich Firefox

-webikt-mainly chrome Google,

-o- Wird hauptsächlich für Browser auf Macs verwendet

1. Box-Shadow (Schatteneffekt)
Verwenden Sie:
Box-Shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 # 000;
-webkit-box-shadow: 20px 10px 0 #000;
Unterstützt:
FF3.5, Safari 4, Chrome 3
2. Rahmenfarben (festgelegt für Rahmen (mehrere Farben)
Verwenden Sie:
Rand: 10 Pixel einfarbig #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
Beschreibung:
Die Nummer der Farbe Werte sind nicht festgelegt und die private Schreibmethode von FF unterstützt keine Abkürzungen: -moz-border-colors: #333 #444 #555;
Unterstützt:
FF3
3. boder-image (Bildrand)
Verwenden Sie:
-moz-border-image: url(exam.png) 20 20 20 20 wiederholen;
-webkit-border-image: url(exam .png) 20 20 20 20 Wiederholung ;
Erläuterung:
(1). Die Breite des Randes entspricht dem oberen, rechten, unteren und linken Rand die Breite kann unterschiedliche Effekte erzielen;
(2 ). Randbildeffekte (derzeit sind nur zwei Arten implementiert):
Wiederholung --- das Randbild wird gekachelt, ähnlich wie bei der Hintergrundwiederholung; -- Das Randbild wird gestreckt, um den gesamten Bereich abzudecken.
(3) Die Randstärke des Elements muss auf einen nicht automatischen Wert ungleich Null eingestellt werden.
Unterstützt:
FF 3.5, Safari 4, Chrome 3

vier. Textschatten (Textschatten) Verwendung:
Textschatten: [< vertikaler Offset>] ||. [ ];
(1) ;Unschärferadius> ist optional, wenn nicht angegeben ist; der Radiuswert ist 0; -getrennte Liste, zum Beispiel:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) Der Schatteneffekt wird auf die Elemente in der in der Schattenliste angegebenen Reihenfolge angewendet;
(4) Diese Schatteneffekte können einander überlappen, aber nicht den Text selbst
(5) Der Schatten kann außerhalb der Grenzen des Containers verlaufen, hat aber keinen Einfluss auf die Größe des Containers
Unterstützung:
FF 3.5, Opera 10, Safari 4, Chrome 3

5. text-overflow (Textkürzung)

Verwenden Sie: text-overflow: inherit | clip ; -o-text -overflow: inherit |. ellipsis |. clip;
Erklärung:
(1) Es gibt auch ein Attribut ellipsis-word, aber nicht alle Browser unterstützen es.
Unterstützung :
IE6, Safari4, Chrome3, Opera10

6. Zeilenumbruch (automatischer Zeilenumbruch)

Verwendung: Zeilenumbruch: normal |. break-word;Unterstützung:
IE6, FF 3.5, Safari 4, Chrome 3

7. border-radius (abgerundeter Rand)

Verwenden Sie: -moz-border-radius: 5px ;-webkit-border-radius : 5px;
Unterstützt:
FF 3, Safari 4, Chrome 3



8. Deckkraft (Deckkraft)

Verwenden Sie: opacity: 0,5; filter: alpha(opacity=50); /* für IE6, 7 */
-ms-filter(opacity=50); /* für IE8 * /
Unterstützung:
alle

9. Box-Sizing (Kontrollbox-Modell-Kompositionsmodus)

Verwenden Sie:Box-Sizing: Content-Box | ; // für Oper -moz-box-sizing: content-box |
-webkit-box-sizing: content-box |
1 . content-box:
Wenn dieser Wert verwendet wird, lautet der Kompositionsmodus des Boxmodells: Elementbreite = Inhaltsauffüllrand;
2. border-box:
Wenn dieser Wert verwendet wird, ist die Komposition Der Modus des Box-Modells lautet: Elementbreite = Inhalt (auch wenn ohne Polsterung und Rand festgelegt, ändert sich die Breite des Elements
nicht).
Unterstützt:
FF3, Opera 10, Safari 4, Chrome 3