شرح صفوف ومحتوى الفقرة
تبدأ جميع عناصر الصفحة بقيمة ابتدائية لخاصية outline-style تساوي none. ولهذا السبب لن يظهر أي أثر بصري لو حددت outline-width أو outline-color بمفردهما؛ بل لا بد من تعيين قيمة مرئية لخاصية outline-style أولاً لتشغيل الحلقة الخارجية.
تأمل المخطط التوضيحي والمثال العملي التالي لملاحظة الفرق المباشر بين غياب النمط وتفعيله:
CSS
.inactive-ring {
outline-width: 4px;
outline-color: #dc2626;
}
.active-ring {
outline-style: solid;
outline-width: 4px;
outline-color: #7750b2;
}