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

خصائص الحدود CSS

يتم استخدام خصائص حدود CSS لتحديد النمط والتنوع والعرض والمد والجزر لحدود المكون. تشمل هذه الخصائص:

• نمط الحدود
• لون الحدود
• عرض الحدود
• نصف قطر الحدود

1) نمط الحدود CSS

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

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

مثال:

 .border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border 

انتاج:

2) عرض حدود CSS

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

ملاحظة: لا يتم استخدام خاصية border-width بمفردها. يتم استخدامه باستمرار مع خصائص الحدود الأخرى مثل خاصية 'نمط الحدود' لتعيين الحدود أولاً بأي طريقة أخرى لن تعمل.

 /* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border 

انتاج:

3) لون الحدود CSS

هناك ثلاث استراتيجيات لتعيين لون الحدود.

• الاسم: يحدد اسم اللون. على سبيل المثال: 'أحمر'.
• RGB: يحدد قيمة RGB للون. على سبيل المثال: 'rgb(255,0,0)'.
• Hex: يحدد القيمة السداسية للون. على سبيل المثال: '#ff0000'.

ملاحظة: لا يتم استخدام خاصية border-color بمفردها. يتم استخدامه باستمرار مع خصائص الحدود الأخرى مثل خاصية 'نمط الحدود' لتعيين الحدود أولاً بأي طريقة أخرى لن تعمل.

مثال:

 .my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover 

انتاج: