CSS/outline

الخاصية outline في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد.

بطاقة الخاصية

القيمة الابتدائية	لكل خاصية مختصرة: outline-color: currentColor outline-style: none outline-width: medium
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	لكل خاصية مختصرة: outline-color: قيمة لونية outline-style: كما حُدِّدَت. outline-width: طول مطلق، إلا إذا حُدِّدَت الكلمة المحجوزة none فستكون القيمة المحسوبة 0.

/* width | style | color */
outline: 1px solid white;

/* القيم العامة */
outline: inherit;
outline: initial;
outline: unset;

حدود العنصر (outline) هي الخطوط المرسومة خارج إطار العنصر لجعله بارزًا في الصفحة، وتُستعمَل عادةً لأغراض لها علاقة بقابلية الوصول، أو لأغراض تزيينية.

الحدود شبيهة بالإطار border في أنها تُرسَم حوال العنصر، ولها نفس الأشكال التي تتوافر للإطارات، لكنها تختلف عنها فيما يلي:

• لا تأخذ حدود العنصر مساحةً إضافيةً، فهي ليست جزءًا من النموذج الصندوقي (box model) وبالتالي لن تُساهم أو تؤثِّر على أبعاد العنصر، وهذا يعني أنَّ إضافة الحدود أو إزالتها من عنصر لن تؤثر على موضعه في الصفحة أو موضع بقية العناصر التي بجواره.
• ستُرسَم الحدود على الأطراف الأربعة للعنصر، ولا يمكننا تحديد الأطراف التي نريد رسم الحدود عليها.
• لا يمكن تطبيق حواف مدورة على الحدود، كما نفعل مع الإطارات عبر الخاصية border-radius.
• قد تكون الحدود غير مستطيلة الشكل، وذلك إن كانت بعض أجزاء العنصر بخطٍ ذي حجمٍ أكبر من غيرها، ولا يُطبَّق ذلك إلا في بعض المتصفحات مثل الإصدارات القديمة من متصفح Opera.

أمثلة

مثال عن قاعدتين متماثلتين للخاصية outline:

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.5	8.0	7.0	1.2

البنية العامة

الخاصية outline تقبل قيمةً واحدةً أو قيمتين أو ثلاث قيم من القيم التالية، لاحظ أنَّ ترتيب القيم غير مهم.

<outline-width>

ضبط عرض حدود العنصر، راجع صفحة العنصر outline-width لمزيدٍ من المعلومات.

<outline-style>

ضبط شكل حدود العنصر، راجع صفحة العنصر outline-style لمزيدٍ من المعلومات.

<outline-color>

ضبط لون حدود العنصر، راجع صفحة العنصر outline-color لمزيدٍ من المعلومات.

البنية الرسمية

outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ];

يمكن أن ترد القيم بأي ترتيبٍ تشاء.

انظر أيضًا

• صفحة الخاصيات الفرعية التي تضبطها الخاصية outline وهي  outline-style و outline-width و outline-color.
• صفحة الخاصية border التي  تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد.

مصادر ومواصفات

• مواصفة CSS Basic User Interface Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.