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

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

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

|}

<syntaxhighlight lang="css">
/* <length> القيم الطولية */
outline-offset: 3px;
outline-offset: 0.2em;

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

== أمثلة ==
سنترك -في المثال الآتي- مسافة وقدرها <code>10px</code> بين العنصر وحدوده، باستخدام الخاصية <code>outline-offset</code>:<syntaxhighlight lang="css">
<p>حدود هذا العنصر ستبعد عنه مسافة 10 بكسل.</p>

</syntaxhighlight>وضعنا خلفيةً وإطارًا للعنصر لكي نعرف أين ينتهي صندوق العنصر:<syntaxhighlight lang="css">
p {
  outline: 1px dashed salmon;
  outline-offset: 10px;
  background-color: lightgray;
  border: 1px solid #069;
  margin: 15px;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.5
|غير مدعومة
|9.5
|1.2
|}
== البنية العامة ==
الخاصية <code>outline-offset</code> تقبل قيمةً طوليةً واحدةً.

===  <code>[[CSS/length|<length>]]</code> ===
المسافة التي تفصل بين العنصر وبين حدوده، وإذا كانت هذه القيمة سالبةً فستُرسَم الحدود داخل العنصر، أما القيمة <code>0</code> فلن تؤدي إلى إضافة أيّة مسافات بين العنصر وحدوده.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
outline-offset: <length>;

</syntaxhighlight>
== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/outline|outline]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي  <code>[[CSS/outline-style|outline-style]]</code> و <code>[[CSS/outline-width|outline-width]]</code> و <code>[[CSS/outline-color|outline-color]]</code>.
* صفحة الخاصية <code>[[CSS/border|border]]</code> التي تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد.
* صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border|border]]</code> وهي: <code>[[CSS/border-width|border-width]]</code> و <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-color|border-color]]</code>.

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-ui-3/#outline-offset CSS Basic User Interface Module Level 3]. 
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].  
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS User Interface|{{SUBPAGENAME}}]]