جوانب الحدود CSS
حدود CSS - جوانب فردية
من الأمثلة الموجودة في الصفحات السابقة ، رأيت أنه من الممكن تحديد حدود مختلفة لكل جانب.
في CSS ، توجد أيضًا خصائص لتحديد كل من الحدود (أعلى ، يمين ، أسفل ، يسار):
مثال
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
نتيجة:
Different Border Styles
يعطي المثال أعلاه نفس النتيجة كما يلي:
مثال
p {
border-style: dotted solid;
}
حتى هنا هو كيف يعمل:
إذا كانت border-styleالخاصية تحتوي على أربع قيم:
- نمط الحدود: منقط صلب مزدوج متقطع ؛
- الحد العلوي منقط
- الحد الأيمن صلبة
- الحد السفلي مزدوج
- الحد الأيسر متقطع
إذا كانت border-styleالخاصية تحتوي على ثلاث قيم:
- نمط الحدود: مزدوج صلب منقط ؛
- الحد العلوي منقط
- الحدود اليمنى واليسرى صلبة
- الحد السفلي مزدوج
إذا كانت border-styleالخاصية تحتوي على قيمتين:
- نمط الحدود: صلب منقط ؛
- الحدود العلوية والسفلية منقطة
- الحدود اليمنى واليسرى صلبة
إذا كان border-styleللعقار قيمة واحدة:
- نمط الحدود: منقط ؛
- جميع الحدود الأربعة منقطة
مثال
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
يتم border-styleاستخدام الخاصية في المثال أعلاه. ومع ذلك ، فإنه يعمل أيضًا مع
border-width
و border-color.