Neue HTML5-Attribute

1. Box-Shadow (Schatteneffekt)

Verwendung:
Box-Shadow: 20px 10px 0 #000; 000;
-webkit-box-shadow: 20px 10px 0 #000;Unterstützung:
FF3.5, Safari 4, Chrome 3
2 )
Verwenden Sie:
Rahmen: 10px solid #000; -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;
Die Anzahl der Farbwerte ist nicht festgelegt , und ist privat für FF. Die Schreibmethode unterstützt keine Abkürzungen: -moz-border-colors: #333 #444 #555;Unterstützt:
FF3
3 🎜>Verwenden Sie:
-moz -border-image: url(exam.png) 20 20 20 20 wiederholen;
-webkit-border-image: url(exam.png) 20 20 20 20 wiederholen; >Beschreibung:
(1) . 20 20 20 20 ---> Die Breite des Randes entspricht jeweils dem oberen, rechten, unteren und linken Rand.
(2 ). Randbildeffekte (derzeit sind nur zwei Typen implementiert):
Wiederholung --- das Randbild wird gekachelt, ähnlich wie bei der Hintergrundwiederholung;
Strecken --- das Randbild wird gestreckt, um es abzudecken gesamter Rand;
(3) Das Element muss auf einen nicht automatischen Wert ungleich 0 eingestellt sein.
FF 3.5, Safari 3
4. text-shadow (Textschatten)
Verwendung:
text-shadow : [



] ||.
Beschreibung:
(1)
und
Ist optional. Wenn
nicht angegeben ist, wird die Textfarbe verwendet. Wenn nicht angegeben ist, ist der Radiuswert 0; (2) Schatten kann eine durch Kommas getrennte Liste sein, wie zum Beispiel: text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd; (3) Schatteneffekte werden auf Elemente angewendet in der in der Schattenliste angegebenen Reihenfolge; (4) Diese Schatteneffekte können sich überlappen, überlagern jedoch nicht den Text selbst. (5) Der Schatten kann über die Grenzen des Containers hinausgehen, wird dies jedoch tun hat keinen Einfluss auf die Größe des Containers. Unterstützt: FF 3.5, Opera 10, Safari 4, Chrome 3 5. Textüberlauf (Textkürzung)
Verwendung:
Textüberlauf : inherit |. ellipsis | -o-text-overflow: inherit | . Unterstützt: IE6, Safari4, Opera10 6 Unterstützung:
IE6, FF 3.5, Safari 4, Chrome 3
7. border-radius (abgerundeter Rand)
Verwenden Sie:
-moz-border-radius: 5px; -border-radius: 5px;
Unterstützung:
FF 3, Safari 4, Chrome 3


8. Deckkraft (Deckkraft):
Deckkraft: 0,5;
filter: alpha(opacity=50); /* für IE6, 7 */
-ms- filter(opacity=50); /* für IE8 */
Unterstützt:
alle
9. Box-Sizing (Kontrollbox-Modell-Kompositionsmodus)
Verwenden Sie:
Box-Sizing: Content-Box | // für Opera
-moz-Box-Sizing: Content-Box |. border-box;
-webkit-box-sizing: content-box |
Beschreibung:
1. content-box:
Wenn dieser Wert verwendet wird, ist der Kompositionsmodus von Das Box-Modell lautet: Elementbreite = Inhaltsauffüllungsrand.
2. border-box:
Wenn dieser Wert verwendet wird, lautet der Kompositionsmodus des Boxmodells: Elementbreite = Inhalt (auch wenn Auffüllung und Rand vorhanden sind). eingestellt, die Breite des Elements
ändert sich nicht).
Unterstützt:
FF3, Opera 10, Safari 4, Chrome 3