وثائق CSS قابلة للتشغيل: ظل الصندوق

Q: ما صيغة box-shadow؟

box-shadow: offset-x offset-y blur spread color;، مثلًا box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. الإزاحتان وحدهما مطلوبتان؛ أضف inset لرسم الظل داخل الصندوق.

ظل الصندوق box-shadow في CSS: الصيغة والانتشار وinset

ترسم box-shadow ظلالًا حول صندوق العنصر. تعلّم القيم الخمس (x وy والتمويه والانتشار واللون)، والظلال الداخلية inset، وتكديس عدة ظلال لعمق واقعي، وحلقات التركيز المصنوعة بالانتشار، والأخطاء التي تجعل الظلال باهتة.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تعمل box-shadow

تطلي box-shadow ظلًا حول صندوق حد العنصر. تتبع border-radius، ولا تشغل مساحة في التخطيط، وتحتاج إلى قيمتين على الأقل: مقدار إزاحتها أفقيًا وعموديًا.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

الصيغة

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

القيمة	المعنى	الافتراضي
`inset`	ارسم الظل داخل الصندوق، كمنطقة مضغوطة إلى الداخل	خارجي
offset-x	الموجبة تحرك إلى اليمين، والسالبة إلى اليسار	مطلوبة
offset-y	الموجبة تحرك إلى الأسفل، والسالبة إلى الأعلى	مطلوبة
blur	مدى نعومة الحافة؛ لا يمكن أن يكون سالبًا	`0` (حافة حادة)
spread	يكبّر الظل (موجب) أو يصغّره (سالب)	`0`
color	أي لون؛ الأسود شبه الشفاف يبدو غالبًا الأفضل	لون النص

عدد الأطوال يحدد معناها: اثنان هما الإزاحتان، والثالث يضيف التمويه، والرابع يضيف الانتشار. جرّب:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب 0 0 0 4px #f59e0b (حلقة)، وinset 0 0 12px #2563eb، و-8px -8px 0 #16a34a.

الانتشار: الحلقات والظلال من جانب واحد

يغيّر الانتشار حجم الظل قبل التمويه. ينتج عنه نمطان:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

حلقة: بلا إزاحة ولا تمويه، انتشار فقط. على عكس الحد، لا تغيّر حجم العنصر، لذلك هي مؤشر تركيز جيد (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
حلقة مع فجوة: كدّس انتشارًا أبيض تحت انتشار ملون أكبر.
جانب واحد فقط: حرّك الظل إلى الأسفل وصغّره بانتشار سالب، فلا يظهر إلا من الأسفل.

ظلال متراكبة لعمق واقعي

للظلال الحقيقية جزء داكن حاد قريب من الجسم، وجزء ناعم خافت أبعد. طبقتان أو ثلاث تحاكي ذلك أفضل بكثير من تمويه واحد كبير:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

يُطلى الظل الأول في القائمة في الأعلى. اجعل ألوان الظلال أسود شبه شفاف أو درجة داكنة من لون الخلفية، لا رماديًا خالصًا أبدًا، كي تُعتم ما تحتها.

الظلال الداخلية

ترسم inset الظل داخل صندوق الحشو، كأن السطح مضغوط إلى الداخل. يناسب حقول النص والتجاويف والأزرار المضغوطة:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

يُرسم الظل الداخلي فوق الخلفية وتحت المحتوى. أما الظلال التي تتبع أشكال الحروف بدل الصندوق فهي text-shadow.

أخطاء شائعة

ظلال سوداء خالصة معتمة تمامًا. تبدو كحد داكن. استخدم ألفا بين 10% و30%.
تمويه ضخم واحد للعمق. كدّس ظلًا صغيرًا حادًا مع ظل كبير ناعم.
ظل مقصوص عند الحافة. سلف عليه overflow: hidden يقصّه؛ أضف حشوًا إلى السلف أو انقل قاعدة overflow.
تمويه سالب. غير صالح ويُتجاهل التصريح كله.
تحريك box-shadow على عناصر كثيرة. يعيد الطلاء في كل إطار. في الصفحات الثقيلة، حرّك opacity لعنصر زائف يحمل الظل الأكبر بدلًا من ذلك.

الأسئلة الشائعة

ما صيغة box-shadow؟

box-shadow: offset-x offset-y blur spread color;، مثلًا box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. الإزاحتان وحدهما مطلوبتان؛ أضف inset لرسم الظل داخل الصندوق.

ماذا يفعل الانتشار spread في box-shadow؟

يكبّر الظل (القيمة الموجبة) أو يصغّره (القيمة السالبة) قبل تمويهه. الظل الذي بلا إزاحة ولا تمويه مع انتشار 3px حلقة صلبة بعرض 3px حول العنصر.

كيف أضع ظلًا من الأسفل فقط؟

أزِحه إلى الأسفل واسحبه إلى الداخل بانتشار سالب كي تختفي الجوانب: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

هل تؤثر box-shadow على التخطيط؟

لا. الظل لا يشغل مساحة ولا يحرّك العناصر الأخرى، ولهذا هو طريقة جيدة لإضافة حلقة تركيز أو رفع عند التمرير من دون أن يتحرك التخطيط. لكن قد يقصّه overflow: hidden على أحد الأسلاف.

هل يمكن وضع عدة ظلال للصندوق؟

نعم، افصل بينها بفواصل. يُرسم الظل الأول في الأعلى. تكديس ظل صغير حاد مع ظل كبير ناعم يبدو أكثر طبيعية من ظل واحد كبير.

مفاهيم ذات صلة