DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
p {
text-shadow: 1px 1px 1px #000;
}Sie können mehrere Textschatten durch Kommas trennen
p {
text-shadow: 1px 1px 1px #000,
3px 3px 5px blue;
}Die ersten beiden Werte geben die Länge des Schattenversatzes an. Der erste Wert gibt den horizontalen Abstand und der zweite den vertikalen Abstand des Schattens an. Der dritte Wert gibt den Weichzeichnungsradius und der letzte Wert die Farbe des Schattens an
1. Wert = Die X-Koordinate
2. Wert = Die Y-Koordinate
3. Wert = Der Weichzeichnungsradius
4. Wert = Die Farbe des Schattens
Die Verwendung positiver Zahlen für die ersten beiden Werte platziert den Schatten horizontal rechts vom Text (erster Wert) und vertikal unterhalb des Textes (zweiter Wert).
Der dritte Wert, der Weichzeichnungsradius, ist ein optionaler Wert, der angegeben werden kann, aber nicht muss. Er gibt die Anzahl der Pixel an, über die der Text gestreckt wird, was einen Weichzeichnungseffekt erzeugt. Wenn Sie den dritten Wert nicht verwenden, wird er so behandelt, als ob Sie einen Weichzeichnungsradius von Null angegeben hätten.
Denken Sie auch daran, dass Sie für die Farbe RGBa- oder HSLa-Werte verwenden können, zum Beispiel eine 40%ige Transparenz von Weiß
p {
text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}Beispiele
Weitere Informationen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9.5+ | 10+ | any | any |
Ich weiß nicht warum, aber es funktioniert nur unter Android 2.2.2, wenn ich die 3. Eigenschaft anders als Null setze.
Beisp.
text-shadow: 1px 3px 0 rot; /funktioniert nicht/
text-shadow: 1px 3px 1px rot; /funktioniert/
Hallo Erik,
Die 0 müsste auch mit px versehen sein, also text-shadow: 1px 3px 0px rot; sollte funktionieren.
Hallo, die 0 muss ein px haben
Danke, es hat mir geholfen!
sehr gut
Sehr cool, danke für deine Beispiele! Ich wusste nicht, dass diese Effekte nur mit text-shadow möglich sind. Ich kann also mehrere text-shadow-Stile haben, solange sie durch Kommas getrennt sind?
Danke, das funktioniert gut
Hier haben wir mehr Texteffekte
http://ustutorials.com/css3-tutorials/css3-text-shadow.php
Ich weiß, dass dies auch mit Vier-Werte-Angaben funktioniert. Aber
funktioniert in Edge/IE, aber nicht in anderen Browsern. Mit vier Werten funktioniert es also nur in Microsoft-Browsern. Danke
.CBSE {
width: 30%;
height: 150px;
background: cyan;
color: #000;
margin: 1%;
position: relative;
box-shadow: 0px 0px 6px #000;
border-radius: 5px;
}
.CBSE p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
text-shadow: 3px 3xp 5px #000000;
}
.shadow {
text-shadow: 3px 3px 5px #000;
}
/* text shadow von p funktioniert nicht */
CBSE
Hallo! Überprüfen Sie Ihre Syntax: Wenn Sie
3xpin3pxändern, sollte das Problem behoben sein. Ein falscher Wert macht die gesamte Eigenschaft ungültig. https://codepen.io/geoffgraham/pen/dyMVZVe