القائمة الرئيسية

الصفحات

خاصية border فى لغة سى اس اس CSS

خاصية border فى لغة سى اس اس CSS

 خاصية css border هى خاصية تستخدم لضبط حدود العرض تسمح لك خصائص الحدود بتحديد كيفية ظهور حدود المربع الذي يمثل عنصراً.


خاصية css border

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

. هناك ثلاث خصائص للحد يمكنك تغييرها -


  يحدد border-color لون الحد.

يحدد border-style ما إذا كان يجب أن يكون الحد متصلاً أم خطاً متقطعاً أم خطاً مزدوجاً أم إحدى القيم المحتملة الأخرى.

يحدد border-widthعرض الحد.

 .الآن ، سنرى كيفية إستخدام هذه الخصائص مع الأمثلة.

1-خاصية لون الحدود The border-color Property

تتيح لك خاصية لون الحدود تغيير لون الحد المحيط بالعنصر. يمكنك تغيير لون الجوانب السفلية واليسرى والعلوية واليمنى لحد عنصر ما بشكل فردي بإستخدام الخصائص .
  1. border-bottom-color changes the color of bottom border.
  2. border-top-color changes the color of top border.
  3. border-left-color changes the color of left border.
  4. border-right-color changes the color of right border.
يوضح المثال التالي تأثير كل هذه الخصائص.

 p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
<p class = "example1">
        .  هذا المثال يظهر جميع الحدود بألوان مختلفة 
      </p>
      
      <p class = "example2">
       .  هذا المثال يظهر كل الحدود باللون الأخضر فقط  
      </p>

 2-خاصية نمط الاطار The border-style Property


:تتيح لك خاصية نمط الحدود تحديد أحد أنماط الحدود التالية -

خاصية نمط الاطار The border-style Property

.وتلك  نماذج لكل عنصر 


خاصية نمط الاطار The border-style Property

3- خاصية سمك الاطار The border-width Property

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

يمكنك تغيير عرض الحدود السفلية والعليا واليسرى واليمنى لعنصر ما بشكل فردي باستخدام الخصائص التالية -


border-bottom-width تغير سمك الاطار السفلي.
border-top-width 
تغير سمك الاطار الاعلي.
border-left-width 
تغير سمك الاطارالايسر.
border-right-width 
تغير سمك الاطار الايمن.
                                                                                                      .  أمثلة 

خاصية سمك الاطار The border-width Property


reaction:

تعليقات