الخاصية box-shadow

الخاصية box-shadow في CSS تصف تأثير الظلال على العنصر، ويمكن إضافة ظل أو أكثر باستخدام هذه الخاصية.

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* يمكن تحديد أيّ عدد من الظلال بالفصل بينها بفاصلة */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

تسمح لنا الخاصية box-shadow بإنشاء ظلال من إطار جميع العناصر، وإذا كانت الخاصية border-radius مُحدَّدة على العنصر مع هذه الخاصية، فستأخذ الظلال شكل الحواف المدورة، وترتيب z-index لظلال العناصر (box-shadow) هو نفس ترتيب ظلال النصوص (text-shadow).

لن تؤثر صورة الإطار border-image على شكل الظل إن وجدت.

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
الوسائط	مرئية
القيمة المحسوبة	كما حُدِّدَت، مع تحويل الأطوال النسبية إلى مطلقة، وحساب الألوان المُحدَّدة.

أمثلة

سنجرِّب مختلف القيم والحالات عبر استعمال اثنا عشر عنصرًا من عناصر <div> في المثال الآتي:

• المثال الأول هو مثال بسيط أسندنا فيه قيمتين إلى الخاصية box-shadow، وهما قيمة الإزاحة على المحور x والمحور y، لاحظ كيف تبدو حواف الظل حادةً.
• المثال الثاني يشبه الأول، لكن مع جعل لون الظل أحمر.
• المثال الثالث يشبه الثاني، لكن مع تحديد قيمة <blur-radius> لإضافة تأثير الضبابية.
• المثال الرابع يشبه الثالث لكن مع إضافة قيمة <spread-radius> لزيادة انتشار الظل.
• المثال الخامس يجعل الظل (ذا اللون الذهبي) وراء العنصر مباشرةً لكن مع إعطائه تأثير الضبابية.
• المثال السادس يشبه المثال السابق لكن مع استخدام الكلمة المحجوزة inset لجعل الظل داخليًا.
• المثال السابع عن استخدام قيمتين للخاصية box-shadow.
• المثال الثامن والتاسع يشبهان الأمثلة السابقة، لكن مع تحديد لون <color> له شفافية.
• المثال العاشر يبيّن كيفية استخدام الخاصية box-shadow لإضافة تأثير على العنصر.
• المثال الحادي عشر والثاني يبيّنان كيف سيبدو الظل مع استخدام الخاصية border-radius.

شيفرة HTML:

<div class="ex1">box-shadow: 2px 6px;</div>
<div class="ex2">box-shadow: 2px 6px red;</div>
<div class="ex3">box-shadow: 2px 4px 10px red;</div>
<div class="ex4">box-shadow: 2px 4px 10px 4px red;</div>
<div class="ex5">box-shadow: 0 0 1em gold;</div>
<div class="ex6">box-shadow: inset 0 0 1em gold;</div>
<div class="ex7">box-shadow: inset 0 0 1em gold, 0 0 1em red;</div>
<div class="ex8">box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);</div>
<div class="ex9">box-shadow: 5px 5px 10px rgba(0,0,0,0.3);</div>
<div class="ex10">box-shadow: inset 1px 1px 100px #000;</div>
<div class="ex11">
    border-radius: 15px;
    <br>
    box-shadow: 2px 6px;
</div>
<div class="ex12">
    border-radius: 5px / 7px;
    <br>
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
</div>

شيفرة CSS:

div {
  padding: 1em;
  margin: 1em;
  background-color: #f8f9fa;
}

.ex1 { box-shadow: 2px 6px; }
.ex2 { box-shadow: 2px 6px red; }
.ex3 { box-shadow: 2px 4px 10px red; }
.ex4 { box-shadow: 2px 4px 10px 4px red; }
.ex5 { box-shadow: 0 0 1em gold; }
.ex6 { box-shadow: inset 0 0 1em gold; }
.ex7 { box-shadow: inset 0 0 1em gold, 0 0 1em red; }
.ex8 { box-shadow: 0px 0px 5px rgba(0, 0, 0, .2); }
.ex9 { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); }
.ex10 { box-shadow: inset 1px 1px 100px #000; }
.ex11 {
  border-radius: 15px;
  box-shadow: 2px 6px;
}
.ex12 {
  border-radius: 5px / 7px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	10	4	9	10.5	5.1

البنية العامة

لتحديد قيمة أحد الظلال فيمكن استخدام:

• قيمتين أو ثلاث أو أربع قيم طولية <length>:
  • إذا تم تحديد قيمتين فسيتم تفسيرهما على أنهما قيم الإزاحة على المحور x والمحور y على التوالي (<offset-x> و <offset-y>).
  • إذا تم تحديد قيمة ثالثة فسيتم تفسيرها على أنها نصف قطر تأثير الضبابية (<blur-radius>).
  • إذا تم تحديد قيمة رابعة فسيتم تفسيرها على أنها نصف قطر الانتشار (<spread-radius>).
• يمكن توفير الكلمة المحجوزة inset اختياريًا.
• يمكن توفير قيمة لونية <color> اختياريًا.

القيمة inset

إذا لم تُحدَّد هذه القيمة، فسيُفترَض أنَّ الظل سيكون drop shadow (أي كأن العنصر يرتفع فوق المحتوى الذي خلفه وله ظل).

أما إذا وجدت هذه الكلمة المحجوزة فستؤدي إلى جعل الظل داخل إطار العنصر، أي كأن العنصر موضوع في صندوق وله ظل أمامه، وسيُرسَم هذا الظل داخل إطار العنصر (حتى لو كان الإطار شفافًا) وفوق الخلفية، لكن تحت المحتوى.

القيمة <offset-x> أو <offset-y>

قيمتان طوليتان <length> تضبطان مدى إزاحة الظل عن العنصر. القيمة <offset-x> تضبط الإزاحة الأفقي، وستؤدي القيم السالبة إلى إظهار الظل على الطرف الأيسر للعنصر. بينما القيمة <offset-y> تؤدي إلى ضبط الإزاحة الرأسية، والقيم السالبة ستؤدي إلى إظهار الظل فوق العنصر. وإذا كانت كلتا القيمتين 0 فسيكون الظل موجودًا خلف العنصر مباشرةً (لكن قد يكون له تأثير الضبابية blur إذا ضُبِطَت القيمة <blur-radius> أو <spread-radius>).

القيمة <blur-radius>

هذه هي ثالث قيمة تقبلها الخاصية box-shadow، وكلما كبرت القيمة زاد تأثير الضبابية، وبالتالي سيصبح الظل أكبر وأكشف لونًا، ولا يُسمَح باستخدام قيم سالبة، والقيمة الافتراضية هي 0 (أي أنَّ حافة الظل «حادة»)، ولا توفِّر المواصفة خوارزمية دقيقة لحساب نصف قطر تأثير الضبابية، فالأمر متروك للمتصفحات.

القيمة <spread-radius>

هذه هي رابع قيمة تقبلها الخاصية box-shadow، والقيم الموجبة لها ستؤدي إلى جعل الظل يتوسع ويكبر، والقيم السالبة ستجعل الظل يتقلص ويصغر، وإذا لم تُحدَّد هذه القيمة فستكون 0 (أي أنَّ قياس الظل سيبقى كما هو).

القيمة <color>

لون الظل، راجع صفحة القيمة <color> لتفاصيل عن طرائق تحديد هذه القيمة. يجدر بالذكر أنَّه إذا لم تُحدَّد هذه القيمة فاللون المستخدم سيكون تابعًا للمتصفح، وتكون قيمته عادةً مساويةً لقيمة الخاصية color (أي currentColor)، لكن لاحظ أنَّ متصفح Safari يعرض ظلًا شفافًا إن لم تُحدَّد هذه القيمة.

البنية الرسمية

box-shadow: none | <shadow>#;

يمكن تحديد الكلمة المحجوزة inset في أي مكان:

<shadow> = inset? && <length>{2,4} && <color>?

مصادر ومواصفات

• مواصفة CSS Backgrounds and Borders Module Level 3.