الخاصية outline

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية outline في CSS هي خاصية مختصرة تُستخدَم لضبط خاصية أو أكثر من الخاصيات outline-style و outline-width و outline-color في آنٍ واحد.
/* width | style | color */
outline: 1px solid white;

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

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

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

أمثلة

مثال عن قاعدتين متماثلتين للخاصية 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'> ];
يمكن أن ترد القيم بأي ترتيبٍ تشاء.

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