خاصية الحدود في علامة <img> لـ HTML

علامة <img> HTML

مثال

يمكن للـ HTML التالي توليد حواف صورة مختلفة من حيث السماكة:

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

جرب بنفسك

التعريف والاستخدام

تحدد خاصية border لـ علامة <img> عرض الحاجز حول الصورة، مما يعني أن يمكنك زيادة أو إزالة حاجز الصورة.

ملاحظة:بشكل افتراضي، ليست للصور حواف (ما لم تكن الصورة داخل علامة <a>).

عادةً، يتم عرض الصور التي تمثل الروابط (مثل الصور الموجودة داخل علامة <a>) داخل حاجز عرضه 2 بكسل، لتوضيح أن يمكن للقراء اختيار هذه الصورة للوصول إلى المستند المرتبط.

يمكنك إزالة (border="0") أو توسيع حاجز الصورة باستخدام خاصية border وعرض عرض حاجز بوحدات البكسل.

ملاحظة:لا يتم التوصية باستخدام هذه الخاصية في HTML 4 وXHTML أيضًا، ويجب أن تحل محلها النمط، ولكنها ما زالت تدعم بشكل جيد من قبل المتصفحات الشائعة.

قراءة متعمقة: إزالة حافات الصور

دعم المتصفح

على الرغم من عدم التوصية باستخدام خاصية border، تدعم جميع المتصفحات الشائعة هذه الخاصية.

إشارات وتعليقات

ملاحظة:لا يتم التوصية باستخدام خاصية "border" للصور في HTML 4.01. في XHTML 1.0 Strict DTD وHTML 5، لا يدعم هذه الخاصية.

إشارةاستخدم خاصية الحاجز في CSS لتغيير نمط الحاجز للعنصر. يمكنك استخدام خاصية حاجز CSS في جدول النمط الخارجي، لضبط حواف جميع الصور على الموقع. مقارنة بتحديد حاجز لصورة واحدة على حدة، هذا الأسلوب يملك كفاءة أعلى.

ملاحظات التوافق

لا يتم التوصية باستخدام خاصية border لـ img في HTML 4.01 Strict وXHTML 1.0 Strict DTD؛ لا يدعم خاصية border لـ img.

استخدم CSS بدلاً من ذلك.

نحو CSS: <img style="border:5px solid black">

مثال CSS: حواف الصورة

في تعليمات CSS الخاصة بنا، يمكنك العثور على المزيد من المعلومات عن خاصية border التفاصيل.

النحو

<img border="value" />

قيمة الخاصية

القيمة الوصف
pixels عرض الحاجز، بوحدات البكسل.

TIY مثال

علامة <img> الخاص بـ border
هذا المثال يوضح كيفية استخدام خاصية border في علامة <img> لتغيير حافات الصورة.

قراءة متعمقة: إزالة حافات الصور

من خلال استخدام خاصية border="0" في علامة <img>، يمكنك إزالة الحافات حول رابط الصورة. بالنسبة لبعض الصور، خاصة تلك التي تكون صورًا لمسارات، يمكن أن تجعل عدم وجود حافات تحسين مظهر الصفحة. وللبوتونات التي تعبر بوضوح أنها تشير إلى صور أخرى، يمكن أن تجعل الصورة تبدو أفضل بدون حافات.

على الرغم من أن إزالة الحافات لن تقلل من قابلية الوثيقة للاستخدام، يجب أن تكون حذرًا. لأن عدم وجود حافات يعني إزالة تأثير إشارة العنكبوت الشائعة للروابط، مما يجعل من الصعب على القراء العثور على هذه الروابط كما كانوا يفعلون من قبل. عادة ما يغير المتصفح شكل المؤشر عند تحريكه فوق صورة الروابط، ولكن لا يمكن التأكد من أن المتصفح سيقوم بذلك دائمًا، ولا يجب أن يبحث المستخدمون عن الروابط المخفية في الصور بدون حافات.

نحن نوصي بشدة أن تستخدموا أفضل الطرق عند استخدام الصور بدون حافات، حتى يعرف القراء كيفية النقر على هذه الصور. حتى مع النص البسيط، من الصعب جعل الوثيقة أكثر قابلية للوصول للقراء.

علامة <img> HTML