حواف الجوانب في CSS

حواف CSS - حافة واحدة

من خلال أمثلة الفصل السابق، رأيت أن يمكنك تحديد حافة مختلفة لكل جانب.

في CSS، هناك بعض الخاصيات يمكن استخدامها لتحديد كل حافة (الجزء العلوي، الأيمن، السفلي واليسرى):

الجوانب الأربعة هي خطوط هزازة

/* قيمة واحدة */
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
border-style: dotted;

النتيجة:

أنماط الحواف المختلفة

}

أنماط الحواف المختلفة

نتيجة المثال السابق هي نفسها:

الجوانب الأربعة هي خطوط هزازة

/* قيمة واحدة */
  /* قيمتان */
border-style: dotted;

}

مبدأ عمله هو كالتالي:

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

/* أربع قيم */

  • الخط العلوى هو خط مبهم
  • الخط الأيمن هو خط متماسك
  • الخط العريض هو خط مزدوج
  • الخط الأيسر هو خط مبهم

الجوانب اليمنى واليسرى هي خطوط صلبة النمط الحدودي الذي استخدم في المثال السابق هو إعداد الخاصية ثلاثة قيم:

/* ثلاثة قيم */

  • الخط العلوى هو خط مبهم
  • الجوانب العلوية والسفلية هي خطوط هزازة
  • الخط العريض هو خط مزدوج

الجوانب اليمنى واليسرى هي خطوط صلبة النمط الحدودي الذي استخدم في المثال السابق هو 属性设置两个值：

/* قيمتان */

  • إعداد الخصائص بمعنىين:
  • الجوانب العلوية والسفلية هي خطوط هزازة

الجوانب اليمنى واليسرى هي خطوط صلبة النمط الحدودي الذي استخدم في المثال السابق هو إذا

p {

  • إعداد الخصائص بمعنى واحد:

الجوانب الأربعة هي خطوط هزازة

مثال
/* قيمة واحدة */
  /* أربع قيم */ 
border-style: dotted;
border-style: dotted solid double dashed;
/* قيمة واحدة */
  /* ثلاثة قيم */ 
border-style: dotted;
border-style: dotted solid double;
/* قيمة واحدة */
  /* قيمتان */ 
border-style: dotted;
border-style: dotted solid;
/* قيمة واحدة */
  p { 
border-style: dotted;

}

جرب بنفسك النمط الحدودي الذي استخدم في المثال السابق هو الخصائص. لكن width-border و color-border يطبق أيضًا