خاصية text-shadow
آخر تحديث: 2026-09-13
text-shadow خاصية text-shadow
تضيف خاصية text-shadow في CSS ظلالًا للنص لإعطائه عمقًا وتدرّجًا بصريًا أمام الخلفية. لكل ظلة إزاحة أفقية وإزاحة رأسية ونصف قطر ضبابي ولون؛ ويمكن تكديس عدة ظلال مفصولة بفواصل لإنشاء تأثيرات التوهج أو النقش البارز أو التحديد.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | shadow |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
text-shadow: none | <shadow>#;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون ظلة نص |
<shadow> | النوع | إزاحة أفقية، إزاحة رأسية، نصف قطر ضبابي، لون |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v1.1 | ✓ v9.5 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： قد يقلّد جعل نصف قطر الضبابية 0 مع إزاحة 1px حدًا، لكن للحدود الحقيقية للنص تفضّل -webkit-text-stroke.
تحذير： قد تؤدي الظلال الكثيرة أو نصف القطر الضبابي الكبير إلى الإضرار بالقابلية للقراءة؛ استخدمها باعتدال وحافظ على تباين كافٍ مع الخلفية.
❓ الأسئلة الشائعة
Qما الفرق بين text-shadow وbox-shadow في CSS؟
Aتُطبَّق text-shadow على الحروف نفسها وتتبع شكل النص؛ بينما تُطبَّق box-shadow على صندوق العنصر بالكامل وتنتج ظلة مستطيلة. ولا تملك text-shadow نصف قطر الانتشار ولا تدعم الكلمة inset للظلال الداخلية.
Qهل يمكنني إضافة عدة ظلال بخاصية text-shadow في إعلان واحد؟
Aنعم. افصل عدة ظلال بفواصل، وتُعرض السابقة في الأعلى. تكون وسائط كل ظلة هي الإزاحة الأفقية والإزاحة الرأسية ونصف القطر الضبابي واللون. وتكديس الظلال هو ما يُبنى به تأثير التوهج النيون والنص ثلاثي الأبعاد.
Qكيف أنشئ تأثير حد للنص باستخدام text-shadow في CSS؟
Aاستخدم أربع ظلال بـ1px في الاتجاهات الأربعة: text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000. والطريقة الأنظف هي -webkit-text-stroke: 1px #000.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
