ظلال CSS3 (Shadows)

使用CSS3，您可以将阴影应用于元素上。

使用CSS3阴影

CSS3使您能够像在Photoshop中一样向元素添加阴影效果，而无需使用任何图像。在CSS3之前，切片图像用于在非常烦人的元素周围创建阴影。

下一节将介绍如何在文字和元素上应用阴影。

CSS3 box-shadow属性

box-shadow属性可用于向元素的框中添加阴影。您甚至可以使用逗号分隔的阴影列表应用多个阴影效果。创建盒子阴影的基本语法可以通过以下方式给出：

box-shadow:　offset-x　offset-y　blur-radius　color;

يحتوي مكونات خاصية box-shadow على المعاني التالية:}}

• offset-x —إعداد الانحراف الأفقي للظل.

• offset-y —إعداد الانحراف العمودي للظل.

• blur-radius —إعداد نصف قطر التلاشي. القيمة الأكبر تزيد من التلاشي، مما يجعل حافة الظل أكثر تلاشيًا. لا يُسمح بالقيم السلبية.

• color —إعداد لون الظل. إذا تم تمرير القيمة أو عدم تحديدها، فإن اللون سيكونcolorقيمة الخاصية.

يرجى الرجوع إلى خاصية box-shadow CSS3 للحصول على معلومات أكثر عن القيم المحتملة.

.box{
　　　　width: 200px;
　　　　height: 150px;
　　　　background: #ccc;
　　　　box-shadow: 5px 5px 10px #999;
}

بالمثل، يمكنك إضافة ظلال متعددة على الصناديق باستخدام قائمة منفصلة بالكومات:

.box{
　　　　width: 200px;
　　　　height: 150px;
　　　　background: #000;
　　　　box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

خاصية text-shadow CSS3

يمكنك استخدام خاصية text-shadow لتطبيق تأثير الظل على النص. يمكنك أيضًا تطبيق ظلال متعددة على النص باستخدام نفس طريقة التعبير التي تستخدم في box-shadow.

h1 {
　　　　text-shadow: 5px 5px 10px #666;
}
h2 {
　　　　text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}