خاصية CSS text-shadow

ظل النص الأساسي:

h1 {
text-shadow: 2px 2px #ff0000;
}

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

تضيف text-shadowالخاصية الظل إلى النص.

تقبل هذه الخاصية قائمة الظلال مفصولة بفواصل ليتم تطبيقها على النص.

القيمة الافتراضية:	لا أحد
وارث:	نعم
متحرك:	نعم. اقرأ عن animatable
الإصدار:	CSS3
بناء جملة JavaScript:	الكائن .style.textShadow = "2px 5px 5px red"

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

Property
text-shadow	4.0	10.0	3.5	4.0	9.6

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

ملاحظة: لإضافة أكثر من ظل إلى النص ، أضف قائمة من الظلال مفصولة بفواصل.

Value	Description	Play it
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur-radius	Optional. The blur radius. Default value is 0
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
none	Default value. No shadow
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

ظل النص مع تأثير التمويه:

h1 {
text-shadow: 2px 2px 8px #FF0000;
}

ظل النص على نص أبيض:

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

ظل النص مع توهج نيون أحمر:

h1 {
text-shadow: 0 0 3px #FF0000;
}

ظل النص مع توهج نيون أحمر وأزرق:

h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

برنامج CSS التعليمي: CSS Text Shadow