الفرق بين المراجعتين ل"CSS/outline-style"

مراجعة 16:45، 29 أغسطس 2018

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

بطاقة الخاصية

القيمة الابتدائية	`none`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

/* الكلمات المحجوزة */
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;

أمثلة

سنستعرض مختلف الأشكال التي تدعمها الخاصية 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

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

مواصفة CSS Basic User Interface Module Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 115: / سطر 115: @@
 حدود العنصر ستكون على شكل خطين متوازيين، وتكون  الخاصية <code>[[CSS/outline-width|outline-width]]</code> هي مجموع ثخن هذين الخطين مع الفراغ بينهما.
 ===  <code>groove</code> ===
-عرض حدود العنصر كأنها منحوتة أو منقوشة، وهذه القيمة عكس  <code>ridge</code>.
+عرض حدود العنصر كأنها منحوتة أو منقوشة، وهي على عكس  <code>ridge</code>.
 ===  <code>ridge</code> ===
-عرض حدود العنصر كأنها منبثقة، وهذه القيمة عكس <code>groove</code>.
+عرض حدود العنصر كأنها منبثقة، وهي على عكس <code>groove</code>.
 ===  <code>inset</code> ===
 عرض الحدود بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس  <code>outset</code>.