انتقل إلى محتوى الدرس

Solid Dashed and Dotted Outlines الأنماط المتصلة والمتقطعة والمنقطة

استكشف جميع قيم خاصية outline-style العشر في لغة CSS بدءاً من الأنماط المتصلة والمتقطعة والمزدوجة والتلقائية وصولاً إلى الأنماط البارزة، وتعلّم قاعدة توحيد الجوانب الأربعة.
2 صفوف تعليمية
لغة CSS
2,895 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

  • المتصل solid: يرسم حلقة مستمرة غير متقطعة، ويُعد الخيار الأول لحلقات التركيز الأساسية والعناصر النشطة.
  • المتقطع dashed: يرسم شُرطاً متساوية المسافات، ويُفضَّل لروابط التخطي السريعة والمناطق القابلة للتحرير أو السحب.
  • المنقط dotted: يرسم سلسلة نقاط متتابعة تمنح تمييزاً هادئاً شرط اختيار لون عالي التباين مع الخلفية.
الصف 2 كود برمجي
CSS
.ring-solid {
  outline-style: solid;
}
.ring-dashed {
  outline-style: dashed;
}
.ring-dotted {
  outline-style: dotted;
}