أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
خاصية النص الظل يضيف الظل إلى النص.
تقبل هذه الخاصية قائمة مفصولة بفواصل من الظلال ليتم تطبيقها على النص.
| القيمة الافتراضية: | none |
|---|---|
| وارث: | yes |
| Animatable: | yes. Read about animatable Try it |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.textShadow="2px 5px 5px red" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
CSS بناء الجملة
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;Note: لإضافة الظل أكثر من واحد في النص، إضافة قائمة مفصولة بفواصل من الظلال.
قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| h-shadow | مطلوب. موقف الظل الأفقي. يسمح القيم السلبية | العبها " |
| v-shadow | مطلوب. موقف الظل الرأسي. يسمح القيم السلبية | العبها " |
| blur-radius | اختياري. في دائرة نصف قطرها طمس. القيمة الافتراضية هي 0 | العبها " |
| color | اختياري. لون الظل. انظروا إلى قيم اللون CSS للحصول على قائمة كاملة من القيم الألوان الممكنة | العبها " |
| none | القيمة الافتراضية. لا الظل | العبها " |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | العبها " |
| 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;
} انها محاولة لنفسك » صفحات ذات صلة
CSS3 البرنامج التعليمي: تأثيرات CSS3 نص
HTML DOM المرجع textShadow property