الخاصية outline-width

من موسوعة حسوب
< CSS
مراجعة 06:02، 16 يناير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

الخاصية outline-width في CSS تضبط عرض (أو ثخن) حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.

/* الكلمات المحجوزة */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> القيم الطولية */
outline-width: 1px;
outline-width: 0.1em;

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

أمثلة

سنستعرض في المثال الآتي جميع القيم التي تقبلها الخاصية outline-width:

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

شيفرة CSS:

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin      { outline-width: thin; }
#medium    { outline-width: medium; }
#thick     { outline-width: thick; }
#twopixels { outline-width: 2px; }
#oneex     { outline-width: 1ex; }
#em        { outline-width: 1.2em; }

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

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

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

الخاصية outline-width تقبل قيمةً واحدةً من القيم التالية.

القيمة thin

سيكون عرض الحدود رفيعًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً 1px.

القيمة medium

سيكون عرض الحدود متوسطًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً 3px.

القيمة thick

سيكون عرض الحدود ثخينًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً 5px.

القيمة <length>

سيكون عرض الحدود مُحدَّدًا عبر قيمةٍ طولية <length>.

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

outline-width: <br-width>;

حيث:

<br-width> = <length> | thin | medium | thick

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