English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يطبق خاصية text-shadow CSS تأثيرات الظل على نص المحتوى للعنصر. يجب تحديد تحريك الظل لكل تأثير ظل، ويمكن اختيار تحديد نصف قطر الغموض ولون الظل.
الجدول أدناه يوضح استخدام الخاصية و سجله التاريخي من الإصدارات، بالإضافة إلى الجملة التي يتم استخدامها في سكربتات جافا سكريبت.
| القيمة الافتراضية: | لا شيء |
|---|---|
| ينطبق على: | جميع العناصر. وهو ينطبق أيضًا على::first-letter و::first-line. |
| الوراثة: | نعم |
| يمكن تحريكه: | نعم.يرجى الرجوع خصائص التحريك. |
| الإصدار: | ميزات CSS3 الجديدة |
| جافا سكريبت الجملة: | عنصر.style.textShadow="2px 2px #ff0000" |
يطبق تأثير الظل على النص وفقًا للترتيب المحدد، لذا قد يتداخل بعضها البعض، لكنه لن يغطي النص نفسه أبدًا.
يمكن تحديد نصف قطر الغموض بعد قيمة تحريك الظل؛ إنه قيمة طول تمثل حجم تأثير الغموض.
يمكن تحديد لون الظل قبل أو بعد طول التباين. إذا لم يتم تحديد لون الظل، فإن CSS سيتم استخدامه. colorقيمة الخاصية.
قواعد النحو لهذه الصفة هي كما يلي:
text-shadow: shadow1 [, shadow2, ... shadowN] | none | inherit where shadow is: [offset-x offset-y blur-radius color]
في المثال أدناه، يتم عرض كيفية استخدام خاصية text-shadow.
h1 {
text-shadow: 2px 2px 5px #000;
}
p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}اختبار لـ‹/›ملاحظة:إذا تم تعيين قيم كل من إزاحة الظل العمودي والأفقي إلى 0، فإن الظل سيتموضع خلف النص، ويمكن أن يحدث تأثير غموض عند تحديد نصف قطر الغموض المحدد.
جدول أدناه يصف قيم هذه الصفة.
| القيم | وصف |
|---|---|
| مطلوب -يجب تحديد القيم التالية للصفة. | |
| h-shadow | مطلوب. موقع الظل أفقيًا. يسمح بالقيم السلبية. |
| v-shadow | مطلوب. موقع الظل عموديًا. يسمح بالقيم السلبية. |
| اختياري -القيم التالية اختيارية. | |
| blur | تحديد حجم الغموض. |
| color | تحديد لون الظل.قيم الألوان CSSللحصول على قائمة بالألوان الممكنة. |
| inherit | إذا تم تحديد، فإن العناصر المرتبطة تستخدم نفس قيمة text-shadow للا爹. |
متطلبات التوافق لميزة text-shadow في المتصفحات، الأرقام في الجدول التالي تعكس أحدث إصدار من المتصفح يدعم هذه الميزة؛ يدعم جميع المتصفحات الرئيسية هذه الميزة.
|
تحذير: لا يدعم متصفح Internet Explorer 7 وأحدث إصداراته القيمة الإرث. يدعم IE8 الإرث، لكنه يتطلب<!DOCTYPE>. يدعم IE9 الإرث.
يرجى الرجوع إلى الدروس التالية:CSS Text.
خصائص متن المرتبطة:letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-transform,white-space,word-spacing.