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

<noinclude>{{DISPLAYTITLE:الخاصية <code>outline-style</code>}}</noinclude>
الخاصية <code>outline-style</code> في CSS تضبط شكل حدود <code>[[CSS/outline|outline]]</code> العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر <code>[[CSS/border|border]]</code>. من المستحسن استخدام الخاصية المختصرة <code>[[CSS/outline|outline]]</code> عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.

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

|}

<syntaxhighlight lang="css">
/* الكلمات المحجوزة */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* القيم العامة */
outline-style: inherit;
outline-style: initial;
outline-style: unset;
</syntaxhighlight>

== أمثلة ==
سنستعرض مختلف الأشكال التي تدعمها الخاصية <code>outline-style</code> في المثال الآتي:<syntaxhighlight lang="html">
<p class="thin">outline-style: none;</p>
<p class="dotted">outline-style: dotted;</p>
<p class="dashed">outline-style: dashed;</p>
<p class="solid">outline-style: solid;</p>
<p class="double">outline-style: double;</p>
<p class="groove">outline-style: groove;</p>
<p class="ridge">outline-style: ridge;</p>
<p class="inset">outline-style: inset;</p>
<p class="outset">outline-style: outset;</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p {
  outline-width: 10px;
  outline-color: red;
  margin: 2em;
  padding: 1em;
}
    
.thin   { outline-style: none; }
.dotted { outline-style: dotted; }
.dashed { outline-style: dashed; }
.solid  { outline-style: solid; }
.double { outline-style: double; }
.groove { outline-style: groove; }
.ridge  { outline-style: ridge; }
.inset  { outline-style: inset; }
.outset { outline-style: outset; }
</syntaxhighlight>مثال عن استخدام عنصرين داخل بعضها لهما حدود:<syntaxhighlight lang="html">
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
</syntaxhighlight>لاحظ أنَّنا سنضيف بعض الحاشية وسنزيد من عرض الحدود لتوضيحها:<syntaxhighlight lang="css">
.dotted {
  outline-style: dotted;
}
.dashed {
  outline-style: dashed;
}

* { outline-width: 10px; padding: 15px; }
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.5
|8.0
|7.0
|1.2
|}
== البنية العامة ==
الخاصية <code>outline-style</code> تقبل قيمةً واحدةً من القيم التالية.

===  <code>none</code> ===
لن تُعرَض حدودٌ للعنصر، أي كما لو كانت  الخاصية <code>[[CSS/outline-width|outline-width]]</code> هي <code>0</code>.
=== <code>dotted</code> ===
حدود العنصر ستكون على شكل سلسلة من النقط.
===  <code>dashed</code> ===
حدود العنصر ستكون على شكل سلسلة من الشرطات <code>-</code>.
===  <code>solid</code> ===
حدود العنصر ستكون خطًا مليئًا.
===  <code>double</code> ===
حدود العنصر ستكون على شكل خطين متوازيين، وتكون  الخاصية <code>[[CSS/outline-width|outline-width]]</code> هي مجموع ثخن هذين الخطين مع الفراغ بينهما.
===  <code>groove</code> ===
عرض حدود العنصر كأنها منحوتة أو منقوشة، وهي على عكس  <code>ridge</code>.
===  <code>ridge</code> ===
عرض حدود العنصر كأنها منبثقة، وهي على عكس <code>groove</code>.
===  <code>inset</code> ===
عرض الحدود بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس  <code>outset</code>.
===  <code>outset</code> ===
عرض الحدود بطريقة تجعل العنصر يبدو وكأنه بارز عن مكانه، وهي على عكس <code>inset</code>.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
outline-style: auto | <br-style>;

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

</syntaxhighlight>

==  انظر أيضًا ==
*صفحة الخاصية <code>[[CSS/outline|outline]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي  <code>[[CSS/outline-color|outline-color]]</code> و <code>[[CSS/outline-width|outline-width]]</code> و <code>[[CSS/outline-offset|outline-offset]]</code>.
*صفحة الخاصية <code>[[CSS/border|border]]</code> التي  تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد.
==مصادر ومواصفات==
* مواصفة [https://drafts.csswg.org/css-ui-3/#outline-style CSS Basic User Interface Module Level 3]. 
* مواصفة ‎[http://www.w3.org/TR/CSS2/ui.html#propdef-outline-style CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS User Interface|{{SUBPAGENAME}}]]