الخاصية outline-style

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية outline-style في CSS تضبط شكل حدود outline العنصر، التي هي الخطوط التي تُرسَم خارج إطار العنصر border. من المستحسن استخدام الخاصية المختصرة outline عند ضبط مظهر حدود العنصر، لأنها تضبط عدِّة خاصيات في آنٍ واحد.
/* الكلمات المحجوزة */
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;
القيمة الابتدائية none
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للحركة لا
القيمة المحسوبة كما حُدِّدَت.

أمثلة

سنستعرض مختلف الأشكال التي تدعمها الخاصية outline-style في المثال الآتي:
<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>
شيفرة 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; }
مثال عن استخدام عنصرين داخل بعضها لهما حدود:
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
لاحظ أنَّنا سنضيف بعض الحاشية وسنزيد من عرض الحدود لتوضيحها:
.dotted {
  outline-style: dotted;
}
.dashed {
  outline-style: dashed;
}

* { outline-width: 10px; padding: 15px; }

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

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

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

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

القيمة none

لن تُعرَض حدودٌ للعنصر، أي كما لو كانت قيمة الخاصية outline-width هي 0.

القيمة dotted

حدود العنصر ستكون على شكل سلسلة من النقط.

القيمة dashed

حدود العنصر ستكون على شكل سلسلة من الشرطات -.

القيمة solid

حدود العنصر ستكون خطًا مليئًا.

القيمة double

حدود العنصر ستكون على شكل خطين متوازيين، وتكون قيمة الخاصية outline-width هي مجموع ثخن هذين الخطين مع الفراغ بينهما.

القيمة groove

عرض حدود العنصر كأنها منحوتة أو منقوشة، وهذه القيمة عكس القيمة ridge.

القيمة ridge

عرض حدود العنصر كأنها منبثقة، وهذه القيمة عكس القيمة groove.

القيمة inset

عرض الحدود بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس القيمة outset.

القيمة outset

عرض الحدود بطريقة تجعل العنصر يبدو وكأنه بارز عن مكانه، وهي على عكس القيمة inset.

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

outline-style: auto | <br-style>;
حيث:
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

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