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

ما هو الفرق بين الحدود والمخطط التفصيلي في CSS؟

تشكل الخطوط العريضة والحدود لـ CSS طبقتين من الطبقات الخارجية لـ نموذج مربع CSSبين الحدود والهوامش. في حين أن هذه الخصائص متشابهة ، إلا أن لها قيمًا وأغراضًا مختلفة.

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

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

حدود CSS والمخطط التفصيلي لقيم الملكية المشتركة

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

CSS Border & Outline Shorthand

مثل خصائص CSS المعقدة الأخرى ، تتوفر كل من الحدود والمخططات التفصيلية المختصرة. تشترك كلتا الخاصيتين في نفس التنسيق لخيارات الاختزال الخاصة بهما ويبدو الأمر هكذا.

instagram viewer 

حدود: عرضأسلوبلون;
الخطوط العريضة: عرضأسلوبلون;

هذا يخلق قواعد تبدو مثل هذا عندما تكون في العمل. بالطبع ، على الرغم من ذلك ، لا يغطي هذا الاختصار جميع القيم المتاحة لهذه الخصائص.

الحدود: 10 بكسل أزرق صلب ؛
المخطط التفصيلي: 20 بكسل أحمر صلب ؛

تؤدي قواعد CSS والمخطط التفصيلية المختصرة هذه إلى حد أزرق رفيع مع مخطط أحمر سميك.

مثل خصائص CSS المختصرة الأخرى ، يمكنك أيضًا استخدام الخصائص الفردية لتحقيق نفس النتائج.

عرض حدود CSS وعرض مخطط تفصيلي

عرض الحدود والمخطط التفصيلي عبارة عن قيم اختيارية لخاصية CSS تحدد سمك الحدود والمخططات التفصيلية التي تستخدمها. تنسيق هذه الخصائص هو نفسه.

عرض المخطط التفصيلي: 20 بكسل ؛
عرض الحدود: 10 بكسل ؛

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

نمط حدود CSS ونمط مخطط تفصيلي

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

نمط الحدود: صلب ؛
نمط المخطط التفصيلي: منقط ؛

يمكنك العثور على قائمة كاملة بأنماط حدود ومخططات CSS المختلفة في نهاية هذه المقالة.

لون حدود CSS ولون مخطط تفصيلي

كما هو الحال مع خصائص CSS الأخرى المستندة إلى الألوان ، تقبل الحدود والمخططات التفصيلية جميع ألوان CSS القانونية. يتضمن ذلك الرموز السداسية ورموز RGB وألوان الاختزال والمزيد.

لون الحدود: أزرق ؛
لون المخطط التفصيلي: # ff0000 ؛

يمكنك أيضًا استخدام التدرجات اللونية عند التعامل مع حدود ومخططات CSS.

قيم خصائص CSS Border

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

نصف قطر حدود CSS

تمنحك إضافة نصف قطر إلى حد العنصر قدرًا كبيرًا من التحكم في شكله. يمكن أن يكون لكل ركن من أركان العنصر نصف قطر مختلف ، ويمكن تعيين هذه الخاصية حتى عند تعيين نمط الحدود على لا شيء.

نصف قطر الحدود: 20 بكسل ؛

يمكنك تعيين قيمة واحدة لتغيير نصف قطر كل الزوايا.

يمكنك أيضًا تقسيم الزوايا إلى مجموعات أعلى اليسار / أسفل اليمين وأعلى اليمين / أسفل اليسار.

نصف قطر الحدود: 10 بكسل 20 بكسل ؛

هذا يجعل من السهل إنشاء أشكال مثيرة للاهتمام باستخدام عناصر HTML الخاصة بك.

أخيرًا ، يمكنك ضبط كل زاوية على نصف قطرها الخاص.

نصف قطر الحدود: 10 بكسل 20 بكسل 30 بكسل 40 بكسل ؛

يتم تطبيق هذه القيم في اتجاه عقارب الساعة بدءًا من الزاوية اليسرى العلوية.

خصائص جانب الحدود في CSS

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

عرض يسار الحد: 10 بكسل ؛
عرض يمين الحد: 20 بكسل ؛
عرض أعلى الحد: 30 بكسل ؛
عرض أسفل الحد: 40 بكسل ؛

يمكنك أيضًا تعيين أنماط حدود CSS مستقلة لكل جانب من جوانب العنصر.

نمط يسار الحد: صلب ؛
نمط يمين الحدود: منقط ؛
نمط أعلى الحدود: متقطع ؛
نمط الحد السفلي: مزدوج;

ويمكنك تغيير لون كل جانب إذا أردت ذلك.

نمط يسار الحد: أزرق ؛
نمط يمين الحدود: # ff0000 ؛
نمط أعلى الحدود: # 00ff00 ؛
نمط الحد السفلي: rgb (0 ، 0 ، 255) ؛

تعمل جوانب حدود CSS مع الاختصار العادي للجمع بين مثل هذا.

يسار الحد: 10 بكسل أزرق خالص ؛
الحد الأيمن: 20بكسل منقط # 00ff00 ؛
أعلى الحد: 30بكسل متقطع # ff0000 ؛
الحد السفلي: 40مقصف مزدوجRGB(0, 0, 255);

قيم خصائص مخطط CSS التفصيلي

مثل حدود CSS ، تمتلك الخطوط العريضة خاصية فريدة خاصة بها ؛ مخطط الإزاحة.

إزاحة مخطط CSS

تؤدي إضافة إزاحة إلى مخطط تفصيلي إلى إنشاء مسافة بينه وبين العنصر الرئيسي. يجب أن تكون هذه الإزاحة هي نفسها لكل جانب من جوانب المخطط التفصيلي ، وتقبل الخاصية قيمة واحدة فقط.

إزاحة المخطط التفصيلي: 10 بكسل ؛

يمكن أن تكون هذه طريقة رائعة للاستفادة من حد ثالث للعناصر التي تطابق لون الخلفية.

أنماط الحدود والمخطط التفصيلية في CSS

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

نمط الحدود: صلب ؛
نمط الحدود: منقط ؛
نمط الحدود: متقطع ؛
نمط الحدود: أخدود.
نمط الحدود: ريدج.
نمط الحدود: مزدوج;
نمط الحدود: أقحم ؛
نمط الحدود: البداية ؛
نمط الحدود: مخفي ؛
نمط الحدود: لا شيء ؛

تشترك الحدود في الأنماط نفسها مع المخططات التفصيلية ، فقط مع تعيين نمط المخطط التفصيلي كخاصية.

كيفية استخدام CSS Borders & Outlines

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