ما هي الطرق المختلفة لإضافة حدود حول الصور (Borders Around Images) ؟
نظريتوجد في CSS طرق متعددة لإضافة حدود حول الصور (borders around images)، وتوفر كل منها خيارات تنسيق ومستويات تحكم مختلفة.
لِنستكشف بعضاً من أكثر الطرق شيوعاً وتعدداً في الاستخدامات.
تُعدّ إضافة إطار (border) إلى صورة باستخدام الخاصية border الطريقة الأبسط؛ إذ تُتيح لك هذه الخاصية المختصرة تحديد عرض (width) الإطار ونمطه (style) ولونه(color) دفعةً واحدة.
index.html
<link rel="stylesheet" href="styles.css">
<img src="https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg" alt="قطة لطيفة مستلقية على ظهرها">
styles.css
img {
border: 2px solid red;
}
معاينة:
تُضيف قاعدة CSS هذه إطاراً أحمر متصلاً (solid red border) بعرض 2 بكسل (2-pixel wide) حول جميع عناصر img. ويمكنك تعديل العرض والنمط (مثل متقطع dashed، أو منقط dotted، أو مزدوج double) واللون بما يتناسب مع متطلبات تصميمك.
إذا كنت بحاجة إلى مزيد من التحكم في جوانب الحدود بشكل منفصل، فيمكنك استخدام خصائص الحدود المحددة (specific border properties) لكل جانب:
index.html
<link rel="stylesheet" href="styles.css">
<img src="https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg" alt="قطة لطيفة مستلقية على ظهرها">
styles.css
img {
border-top: 10px solid red;
border-right: 10px dashed green;
border-bottom: 10px dotted blue;
border-left: 10px double purple;
}
معاينة:
يتيح لك ذلك إنشاء أنماط حدود فريدة (unique border styles) لكل جانب من جوانب الصورة.
هناك طريقة أخرى لإنشاء تأثير إطار (border) وهي استخدام الخاصية outline. ورغم تشابهها مع الخاصية border، إلا أن outline لا تؤثر في أبعاد العنصر أو تخطيطه:
index.html
<link rel="stylesheet" href="styles.css">
<img src="https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg" alt="قطة لطيفة مستلقية على ظهرها">
styles.css
img {
outline: 3px solid gold;
}
معاينة:
يُنشئ هذا إطاراً ذهبياً (gold outline) حول الصورة دون تغيير حجمها (size) أو موقعها (position).
إذا كنت ترغب في إنشاء زوايا مستديرة (rounded corners) للإطار، يمكنك استخدام الخاصية border-radius بالتزامن مع الخاصية border :
index.html
<link rel="stylesheet" href="styles.css">
<img src="https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg" alt="قطة لطيفة مستلقية على ظهرها">
styles.css
img {
border: 2px solid black;
border-radius: 10px;
}
معاينة:
تذكر أنه يمكن دمج هذه التقنيات وتخصيصها لابتكار تأثيرات فريدة للحواف؛ ويعتمد اختيار الطريقة على متطلبات التصميم الخاصة بك ومستوى التعقيد المطلوب.
أسئلة :
ما هي خاصية CSS التي تتيح لك إنشاء إطار (border) لا يؤثر على أبعاد العنصر (element's dimensions) ؟
1. border ❌
2. outline ✅
3. box-shadow ❌
4. border-image ❌
كيف يمكنك إنشاء إطار أحمر متقطع بعرض 3 بكسل (3-pixel wide, dashed, red border) على الجانب الأيسر (on the left side) للصورة فقط؟
1.
img {
border: 3px dashed red left;
}
2.
img {
border-left: 3px dashed red;
}
3.
img {
left-border: 3px dashed red;
}
4.
img {
border: left 3px dashed red;
}
ما هي خاصية CSS التي ستستخدمها لجعل زوايا الحدود مستديرة (round the corners of a border) ؟
1. border-style ❌
2. border-radius ✅
3. border-spacing ❌
4. border-bottom ❌