أثر الظلال CSS
ظلال
أنشئ تأثيرات الظلال باستخدام CSS!
أوقف التمرير فوقي!
أثر الظلال CSS
من خلال استخدام CSS، يمكنك إضافة ظلال إلى النص والإлементات.
في هذا الدليل، ستعلم عن الصفات التالية:
text-shadowbox-shadow
ظلال النص CSS
CSS text-shadow الصفة تضيف ظلال النص.
أبسط استخدامه هو تحديد الظلال الأفقية (2px) والعمودية (2px):
文字阴影效果！
实例
h1 {
text-shadow: 2px 2px;
}
ثم، أضف اللون إلى الظلال:
文字阴影效果！
实例
h1 {
text-shadow: 2px 2px red;
}
ثم، أضف تأثير الغموض إلى الظلال:
文字阴影效果！
实例
h1 {
text-shadow: 2px 2px 5px red;
}
السؤال التالي يوضح كيفية عرض نص أبيض يحتوي على ظلال سوداء:
文字阴影效果！
实例
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;
}
下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本：
文字阴影效果！
实例
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
您还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：
包围文本的边框！
实例
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
