عرض مصدر CSS/outline-width

<noinclude>{{DISPLAYTITLE:الخاصية <code>outline-width</code>}}</noinclude>
الخاصية <code>outline-width</code> في CSS تضبط عرض (أو ثخن) حدود <code>[[CSS/outline|outline]]</code> العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. من المستحسن استخدام الخاصية المختصرة <code>[[CSS/outline|outline]]</code> عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.<syntaxhighlight lang="css">
/* الكلمات المحجوزة */
outline-width: thin;
outline-width: medium;
outline-width: thick;

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

/* القيم العامة */
outline-width: inherit;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>medium</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للحركة
|نعم
|-
! scope="row" |القيمة المحسوبة
|طول مطلق، إلا إذا حُدِّدَت الكلمة المحجوزة <code>none</code> فستكون القيمة المحسوبة 0.

|}

== أمثلة ==
سنستعرض في المثال الآتي جميع القيم التي تقبلها الخاصية <code>outline-width</code>:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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; }
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.5
|8.0
|7.0
|1.2
|}
== البنية العامة ==
الخاصية <code>outline-width</code> تقبل قيمةً واحدةً من القيم التالية.

=== القيمة <code>thin</code> ===
سيكون عرض الحدود رفيعًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً <code>1px</code>.
=== القيمة <code>medium</code> ===
سيكون عرض الحدود متوسطًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً <code>3px</code>.
=== القيمة <code>thick</code> ===
سيكون عرض الحدود ثخينًا، وتختلف هذه القيمة بين المتصفحات لكنها تساوي عادةً <code>5px</code>.
=== القيمة <code>[[CSS/length|<length>]]</code> ===
سيكون عرض الحدود مُحدَّدًا عبر قيمةٍ طولية <code>[[CSS/length|<length>]]</code>.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
outline-width: <br-width>;

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<br-width> = <length> | thin | medium | thick
</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-ui-3/#outline-width CSS Basic User Interface Module Level 3]. 
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions]. 
* مواصفة ‎[http://www.w3.org/TR/CSS2/ui.html#propdef-outline-width CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS User Interface|{{SUBPAGENAME}}]]