الفرق بين المراجعتين لصفحة: «CSS/border»

المراجعة الحالية بتاريخ 11:17، 7 أكتوبر 2022

الخاصية border في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية border لا يمكن أن تُستخدَم لتحديد قيمة للخاصية border-image وإنما ستضبِط قيمتها إلى القيمة الابتدائية none.

border: 1px;
border: 2px dotted;
border: medium dashed green;

من المستحسن استخدام الخاصية border إذا كانت تريد ضبط جميع الإطارات إلى قيمة واحدة، فلو أردتَ أن يكون لكل طرف من الإطار قيمةٌ خاصةٌ به فربما يجدر بك استخدام الخاصيات border-width و border-style و border-color التي تسمح كلُ واحدةٍ منها بضبط ما يصل إلى أربع قيم (قيمة لكل جانب من جوانب الإطار)، بينما الخاصية border تسمح لك بضبط قيمة واحدة التي ستُطبّق على جميع جوانب الإطار التابعة للعنصر.

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

القيمة الابتدائية	لكل قيمة مختصرة: `border-width`: لكل قيمة مختصرة: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: لكل قيمة مختصرة: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `border-color`: لكل قيمة مختصرة: `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	لكل قيمة مختصرة: `border-width`: لكل قيمة مختصرة: `border-bottom-width`: طول `<length>`. `border-left-width`: طول `<length>`. `border-right-width`: طول `<length>`. `border-top-width`: طول `<length>`. `border-style`: لكل قيمة مختصرة: `border-bottom-style`: كما حُدِّدَت. `border-left-style`: كما حُدِّدَت. `border-right-style`: كما حُدِّدَت. `border-top-style`: كما حُدِّدَت. `border-color`: لكل قيمة مختصرة: `border-bottom-color`: اللون المحسوب. `border-left-color`: اللون المحسوب. `border-right-color`: اللون المحسوب. `border-top-color`: اللون المحسوب.

أمثلة

سنستعرض في المثال الآتي ثلاث طرائق لتحديد إطار العنصر، لاحظ أنَّ الخاصيات التي لن تُحدَّد قيمتها عبر الخاصية المختصرة border سيُعاد ضبط قيمتها إلى القيمة الابتدائية.

شيفرة HTML:

<div>
  <div class="solid">موسوعة حسوب، مرجع المطورين العرب.</div>
  <div class="dotted">موسوعة حسوب، مرجع المطورين العرب.</div>
  <div class="dashed">موسوعة حسوب، مرجع المطورين العرب.</div>
</div>

شيفرة CSS:

div > div {
  float: right;
  margin: 10px;
}

.solid {
  border-style: dotted;
  border: solid;
}

.dotted {
  border: 2px dotted;
}

.dashed {
  border: medium dashed green;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4	3.5	1.0

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

هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، ويمكن حذف قيمة أو قيمتين من تلك القيم.

`<br-width>`

ثخن الإطار، القيمة الافتراضية هي medium، راجع صفحة الخاصية border-width للتفاصيل.

`<br-style>`

شكل الإطار، القيمة الافتراضية هي none، راجع صفحة الخاصية border-style للتفاصيل.

`<color>`

لون الإطار، القيمة الافتراضية هي قيمة الخاصية color (أي currentColor)، راجع صفحة الخاصية border-color للتفاصيل.

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

border: <br-width> || <br-style> || <color>;

يمكن وضع القيم بأي ترتيبٍ تشاء.

<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

انظر أيضًا

صفحة الخاصيات التي تضبطها الخاصية المختصرة border وهي: border-width، و border-style، و border-color.
صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي border-top، والإطاري السفلي border-bottom، والإطار اليميني border-right، والإطار اليساري border-left.
ضبط صورة للإطار باستخدام الخاصية border-image.
الأركان المدورة border-radius.

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

مواصفة CSS Backgrounds and Borders Module Level 3. أصبحت الخاصية border تُعيد ضبط قيمة الخاصية border-image إلى none.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>border</code>}}</noinclude>
-الخاصية <code>border</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: <code>[[CSS/border-color|border-color]]</code> و <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-width|border-width]]</code>، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية <code>border</code> لا يمكن أن تُستخدَم لتحديد قيمة للخاصية <code>[[CSS/border-image|border-image]]</code> وإنما ستضبِط قيمتها إلى [[CSS/initial value|القيمة الابتدائية]] <code>none</code>.<syntaxhighlight lang="css">
+الخاصية <code>border</code> في [[CSS]] هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: <code>[[CSS/border-color|border-color]]</code> و <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-width|border-width]]</code>، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية <code>border</code> لا يمكن أن تُستخدَم لتحديد قيمة للخاصية <code>[[CSS/border-image|border-image]]</code> وإنما ستضبِط قيمتها إلى [[CSS/initial value|القيمة الابتدائية]] <code>none</code>.<syntaxhighlight lang="css">
 border: 1px;
 border: 2px dotted;
 border: medium dashed green;
 </syntaxhighlight>من المستحسن استخدام الخاصية <code>border</code> إذا كانت تريد ضبط جميع الإطارات إلى قيمة واحدة، فلو أردتَ أن يكون لكل طرف من الإطار قيمةٌ خاصةٌ به فربما يجدر بك استخدام الخاصيات <code>[[CSS/border-width|border-width]]</code> و <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-color|border-color]]</code> التي تسمح كلُ واحدةٍ منها بضبط ما يصل إلى أربع قيم (قيمة لكل جانب من جوانب الإطار)، بينما الخاصية <code>border</code> تسمح لك بضبط قيمة واحدة التي ستُطبّق على جميع جوانب الإطار التابعة للعنصر.
+== بطاقة الخاصية ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 57: / سطر 59: @@
 سنستعرض في المثال الآتي ثلاث طرائق لتحديد إطار العنصر، لاحظ أنَّ الخاصيات التي لن تُحدَّد قيمتها عبر الخاصية المختصرة <code>border</code> سيُعاد ضبط قيمتها إلى [[CSS/initial value|القيمة الابتدائية]].
-شيفرة HTML:<syntaxhighlight lang="html">
+شيفرة [[HTML]]:<syntaxhighlight lang="html">
 <div>
-   <div class="solid">
+   <div class="solid">موسوعة حسوب، مرجع المطورين العرب.</div>
-    Lorem ipsum dolor sit amet.
+   <div class="dotted">موسوعة حسوب، مرجع المطورين العرب.</div>
-  </div>
+   <div class="dashed">موسوعة حسوب، مرجع المطورين العرب.</div>
-   <div class="dotted">
-    Lorem ipsum dolor sit amet.
-  </div>
-   <div class="dashed">
-    Lorem ipsum dolor sit amet.
-  </div>
 </div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 div > div {
-   float: left;
+   float: right;
    margin: 10px;
 }
@@ سطر 108: / سطر 104: @@
 == البنية العامة ==
 هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، ويمكن حذف قيمة أو قيمتين من تلك القيم.
-=== القيمة <code><br-width></code> ===
+=== <code><br-width></code> ===
 ثخن الإطار، القيمة الافتراضية هي <code>medium</code>، راجع صفحة الخاصية <code>[[CSS/border-width|border-width]]</code> للتفاصيل.
-=== القيمة <code><br-style></code> ===
+=== <code><br-style></code> ===
 شكل الإطار، القيمة الافتراضية هي <code>none</code>، راجع صفحة الخاصية <code>[[CSS/border-style|border-style]]</code> للتفاصيل.
-=== القيمة <code>[[CSS/color value|<color>]]</code> ===
+=== <code>[[CSS/color value|<color>]]</code> ===
 لون الإطار، القيمة الافتراضية هي قيمة الخاصية <code>[[CSS/color|color]]</code> (أي <code>[[CSS/color value#الكلمة المحجوزة currentColor|currentColor]]</code>)، راجع صفحة الخاصية <code>[[CSS/border-color|border-color]]</code> للتفاصيل.
@@ سطر 128: / سطر 124: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>border</code> وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
+*صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي <code>[[CSS/border-top|border-top]]</code>، والإطاري السفلي <code>[[CSS/border-bottom|border-bottom]]</code>، والإطار اليميني <code>[[CSS/border-right|border-right]]</code>، والإطار اليساري <code>[[CSS/border-left|border-left]]</code>.
+*ضبط صورة للإطار باستخدام الخاصية <code>[[CSS/border-image|border-image]]</code>.
+*الأركان المدورة <code>[[CSS/border-radius|border-radius]]</code>.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-border-shorthands CSS Backgrounds and Borders Module Level 3]. أصبحت الخاصية <code>border</code> تُعيد ضبط قيمة الخاصية <code>[[CSS/border-image|border-image]]</code> إلى <code>none</code>.