خاصية box-decoration-break
آخر تحديث: 2026-09-13
box-decoration-break خاصية box-decoration-break
تتحكم الخاصية box-decoration-break في كيفية عرض زخارف العنصر — مثل الخلفية والحدود والحشو — عند نقطة كسر مثل كسر السطر أو الصفحة. أما القيمة الافتراضية slice فتعرض الزخرفة وكأنها مقطوعة؛ و clone تعرض زخرفة كاملة لكل جزء. وتؤثر أساسًا على مظهر العناصر المضمّنة عبر كسر الأسطر وترقيم صفحات الطباعة.
| الفئة | |
|---|---|
| القيمة الأولية | slice |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
box-decoration-break: slice | clone;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
slice | clone | كلمة مفتاحية | كيف تنكسر الزخارف. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-decoration-break | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v16 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： للعناصر المضمّنة التي يمتد خلفيتها عبر عدة أسطر، يمنح box-decoration-break:clone كل سطر حشوه الخاص وزواياه المستديرة الكاملة، مما يبدو أفضل.
❓ الأسئلة الشائعة
Qما الفرق بين slice و clone؟
Aslice، وهي الافتراضية، تقطع العنصر عند الكسر كالسكين: فيستمر الخلفية والحدود والحشو عبر الكسر دون أن يُغلق، لذا تبدو الأجزاء الأولى والأخيرة غير مكتملة. أما clone فيعرض كل جزء بشكل مستقل بخلفية وحدود وحشو وزوايا مستديرة كاملة، فتبدو كل سطر كصندوق صغير كامل. وللعناصر المضمّنة الملفوفة التي يجب أن يكون لكل سطر زوايا مستديرة كاملة، استخدم clone.
Qمتى سأحتاج إلى هذه الخاصية؟
Aالحالة النموذجية هي عنصر مضمّن مثل span أو a يلتف عبر أسطر متعددة: لمنح كل سطر كتلة خلفية خاصة به وزوايا مستديرة وحشوًا كاملة، استخدم box-decoration-break:clone، وهو شائع في التظليل وأنماط الوسم والخطوط السفلية للروابط متعددة الأسطر. وتناسب slice التأثيرات التي يجب أن تتدفق فيها الزخرفة باستمرار. وسيناريو آخر هو ترقيم صفحات الطباعة، حيث تتحكم في كيفية انكسار الزخارف عند حواف الصفحة.
Qما مدى دعم المتصفحات لـ box-decoration-break؟
Aيدعمها Firefox أصليًا. أما Chrome و Edge و Safari، وهي المتصفحات المبنية على WebKit، فتتطلب تاريخيًا بادئة -webkit-box-decoration-break؛ ويدعم Chrome الصيغة دون بادئة منذ الإصدار 115، بينما ظل Safari معتمدًا على البادئة منذ زمن طويل. وللأمان، اكتب كليهما: النسخة المبادئة بـ -webkit- أولًا، ثم الإعلان القياسي. فالمتصفحات التي تفهم الصيغة المبادئة تستخدمها، ويتجاوز الأحدث منها إلى الخاصية القياسية.
Qما أنماط الزخرفة التي تؤثر عليها؟
Aتؤثر على زخارف الصندوق مثل الخلفية والحدود و border-radius والحشو و box-shadow، محددةً كيفية عرضها عند كسر السطر أو الصفحة. لاحظ أنها لا تؤثر على ترتيب المحتوى المضمّن بعد الانقسام، ولا تغير التفاف النص ذاته؛ بل تتحكم فقط في سلوك الزخارف عند الكسر. لذا يمكنك تطبيقها بحرية دون القلق بشأن تدفق النص الأساسي.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
