الفرق بين المراجعتين لصفحة: «CSS/outline-style»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
سطر 131: | سطر 131: | ||
* مواصفة [https://drafts.csswg.org/css-ui-3/#outline-style CSS Basic User Interface Module Level 3]. | * مواصفة [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)]. | * مواصفة [http://www.w3.org/TR/CSS2/ui.html#propdef-outline-style CSS Level 2 (Revision 1)]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS User Interface]] | [[تصنيف:CSS User Interface|{{SUBPAGENAME}}]] |
مراجعة 15:35، 28 يناير 2018
الخاصية 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
مصادر ومواصفات
- مواصفة CSS Basic User Interface Module Level 3.
- مواصفة CSS Level 2 (Revision 1).