حدود

بودكاست CSS - 016: الحدود

في وحدة نموذج الصندوق، استخدمنا تشبيه الإطار لوصف كل قسم من نموذج المربّع.

ثلاثة إطارات صور بجانب بعضها. يحتوي الإطار الأوسط على أقسام نموذج المربع فوقه

والمربّع الحدودي هو إطار المربعات، وتمنحك خصائص border مجموعة كبيرة من الخيارات لإنشاء هذا الإطار بأي نمط يمكن أن يخطر ببالك تقريبًا.

خصائص الحدود

توفّر سمات border الفردية طريقة لتصميم الأجزاء المختلفة من الحد.

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

النمط

لكي تظهر الحدود، عليك تحديد border-style. هناك بضعة خيارات يمكنك الاختيار من بينها:

عند استخدام الأنماط ridge وinset وoutset وgroove، سيعمل المتصفّح على تعتيم لون الحدود للون الثاني المعروض لتوفير التباين والعمق. ويمكن أن يختلف هذا السلوك من متصفّح إلى آخر، لا سيما للألوان الداكنة مثل black. في Chrome، ستظهر أنماط الحدود هذه بشكل ثابت وفي Firefox، سيتم تفتيحها لتوفير لون ثانٍ أغمق.

وقد يختلف سلوك المتصفح باختلاف أنماط الحدود الأخرى أيضًا، لذا من المهم اختبار موقعك الإلكتروني في متصفحات مختلفة. ومن الأمثلة الشائعة على هذا الاختلاف كيفية عرض كل متصفِّح للنمطَين dotted وdashed.

عرض الحدود التوضيحية في Chrome وFirefox وSafari والذي يوضّح الاختلافات الطفيفة في طريقة عرض الحدود
الحدود المعروضة في Chrome وFirefox وSafari

لضبط نمط الحد على كل جانب من المربع، يمكنك استخدام border-top-style وborder-right-style وborder-left-style وborder-bottom-style.

اختصار

كما هي الحال في margin وpadding، يمكنك استخدام السمة المختصرة border لتحديد جميع أجزاء الحدود الجغرافية في بيان واحد.

.my-element {
    border: 1px solid red;
}

ترتيب القيم في اختصار border هو border-width، border-style ثم border-color.

اللون

يمكنك ضبط اللون على كل جوانب العلبة أو على كل جانب على حدة باستخدام border-color. ويستخدم تلقائيًا لون النص الحالي للمربّع: currentColor. هذا يعني أنه إذا أعلنت فقط خصائص الحد، مثل العرض، سيكون اللون تلك القيمة المحسوبة ما لم تقم بتعيينها بشكل صريح.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

لضبط لون الحدود على كل جانب من المربع، استخدِم border-top-color وborder-right-color وborder-left-color وborder-bottom-color.

العرض

يشير عرض الحدود إلى مدى سُمك الخط، ويتم التحكّم فيه من خلال border-width. العرض التلقائي للحدود هو medium. ومع ذلك، لن يكون هذا مرئيًا ما لم تحدّد نمطًا. يمكنك استخدام قيم عرض أخرى مسماة، مثل thin وthick.

تقبل السمات border-width أيضًا وحدة طول، مثل px أو em أو rem أو %. لضبط عرض الحدود على كل جانب من العلبة، استخدِم border-top-width وborder-right-width وborder-left-width وborder-bottom-width.

الخصائص المنطقية

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

يمكنك استخدام هذه الإمكانية أيضًا مع الحدود:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

في هذا المثال، تحتوي .my-element على جميع الجوانب التي تم تعريفها على أنها تحتوي على 2px، حد منقط، وهو لون النص الحالي. بعد ذلك، يتم تعريف الحد inline-end على أنّه 2px، متّصل مع أحمر اللون. وهذا يعني أنه في اللغات التي تُكتب من اليسار إلى اليمين، مثل الإنجليزية، سيكون الحد الأحمر على الجانب الأيمن من المربع. في اللغات التي تُكتب من اليمين إلى اليسار، مثل العربية، سيكون الحد الأحمر على الجانب الأيسر من المربع.

يتنوع التوافق مع المتصفح للخصائص المنطقية في الحدود، لذا احرص على التحقق من الدعم قبل الاستخدام.

نصف قطر الحد

لإضافة مربّع إلى زوايا مستديرة، استخدِم السمة border-radius.

.my-element {
    border-radius: 1em;
}

يضيف هذا الاختصار حدًا ثابتًا لكل زاوية من زوايا المربع. كما هي الحال في سمات الحدود الأخرى، يمكنك تحديد نصف قطر الحدود لكل جانب باستخدام border-top-left-radius وborder-top-right-radius وborder-bottom-right-radius وborder-bottom-left-radius.

يمكنك أيضًا تحديد نصف قطر كل زاوية في الاختصار، يتبع الترتيب: أعلى اليسار، أعلى اليمين، أسفل اليمين ثم أسفل اليسار.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

بتحديد قيمة واحدة لزاوية، فأنت تستخدم اختصارًا آخر لأن نصف قطر الحد ينقسم إلى جزأين: الجانب الرأسي والأفقي. وهذا يعني أنه عند ضبط border-top-left-radius: 1em، سيتم ضبط النطاق الجغرافي في أعلى يسار الصفحة على أعلى نصف قطر الدائرة أعلى اليسار ونصف قطر أعلى اليسار.

ويمكنك تحديد كِلا الموقعَين، في كل زاوية كما يلي:

.my-element {
    border-top-left-radius: 1em 2em;
}

يؤدي ذلك إلى إضافة قيمة border-top-left-top لـ 1em وقيمة border-top-left-left بـ 2em. يحوّل هذا نصف قطر الحد الأيسر إلى نصف قطر إهليلجي، بدلاً من نصف القطر الدائري الافتراضي.

يمكنك تحديد هذه القيم في اختصار border-radius باستخدام / لتحديد القيم البيضاوية بعد القيم العادية. وهذا يمكّنك من الإبداع وإنشاء بعض الأشكال المعقدة.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

صور الحدود

لا تحتاج فقط إلى استخدام حد يستند إلى الحد في CSS. يمكنك أيضًا استخدام أي نوع من الصور باستخدام border-image. تسمح لك خاصية الاختصار هذه بتعيين الصورة المصدر، وكيفية تقسيم هذه الصورة، وعرض الصورة، ومدى بُعد الحد عن الحافة وكيفية تكرارها.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

تشبه السمة border-image-width border-width: وهي الطريقة التي يمكنك بها ضبط عرض صورة الحدود. تتيح لك السمة border-image-outset ضبط المسافة بين صورة الحدود والمربّع الذي يلتف حوله.

border-image-source

يمكن أن تكون السمة border-image-source (مصدر صورة الحدود) url لأي صورة صالحة تتضمّن تدرجات CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

تُعدّ السمة border-image-slice خاصية مفيدة تتيح لك تقسيم الصورة إلى 9 أجزاء تتألف من 4 خطوط مقسّمة. وهو يعمل مثل الاختصار margin حيث تُحدِّد قيمة الإزاحة العلوية اليمنى واليسرى والسفلية.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

الصورة المستخدمة في العرض التوضيحي مع الشرائح الأربع المعروضة بخطوط زرقاء

مع تحديد قيم الإزاحة، لديك الآن 9 أقسام من الصورة: 4 زوايا و4 حواف وقسم متوسط. يتم تطبيق الزوايا على زوايا العنصر مع صورة الحدود. يتم تطبيق الحواف على حواف هذا العنصر. تحدّد السمة border-image-repeat كيفية تعبئة تلك الحواف لمساحتها، وتتحكّم border-image-width في حجم الشرائح.

أخيرًا، تحدِّد الكلمة الرئيسية fill ما إذا كان سيتم استخدام القسم الأوسط، المتروك من خلال التقسيم، كصورة خلفية للعنصر أم لا.

border-image-repeat

border-image-repeat هي الطريقة التي توجّه بها CSS إلى الطريقة التي تريد تكرار صورة الحدود بها. وهي تعمل بالطريقة نفسها التي تعمل بها background-repeat.

  • القيمة الأولية هي stretch، وهي تساعد في توسيع صورة المصدر لملء المساحة المتوفرة حيثما أمكن.
  • تقسّم القيمة repeat حواف صورة المصدر لأكبر عدد ممكن من المرات، وقد يتم اقتصاص مناطق الحافة لتحقيق ذلك.
  • قيمة round مماثلة للتكرار، ولكن بدلاً من قص مناطق حافة الصورة لتلائم أكبر عدد ممكن، فإنها تمد الصورة وتكرارها للحصول على تكرار سلس
  • قيمة space هي نفسها مرة أخرى، لكن هذه القيمة تضيف مسافة بين كل منطقة حافة لإنشاء نمط سلس.

التحقّق من استيعابك

اختبر معلوماتك عن الحدود

ما لون الحد الافتراضي؟

black
يُرجى اختيار إجابة أخرى.
white
يُرجى اختيار إجابة أخرى.
currentColor
ستمثل قيمة CSS الخاصة هذه قيمة text-color المحسوبة، وهي لون الحدود التلقائي.
historicColor
هذا يتكون. يُرجى اختيار إجابة أخرى.
 
.my-element {
  border: solid hotpink;
}

ما العرض التلقائي للحدود؟

1px
يُرجى اختيار إجابة أخرى.
medium
🎉
solid
هذه القيمة border-style وليست border-width.

border-inline: 1px solid:

وضع الحدود على اليسار واليمين (في تخطيطات لاتينية).
🎉
وضع حدود في الأعلى والأسفل (في تخطيطات لاتينية).
في التنسيق اللاتيني مثل الإنجليزية، سيكون border-block في الأعلى والأسفل.
وتضع حدودًا على الداخل.
يُرجى اختيار إجابة أخرى.
وضع الحدود على السطر الأول.
يُرجى اختيار إجابة أخرى.