الحدود والزوايا المستديرة والظلال

الحدود والزوايا المستديرة والظلال في Tailwind CSS

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

عرض الحد

تتحكم أدوات border-{width} في سمك الحدود على جميع الجوانب أو الجوانب الفردية للعنصر:

<!-- حد على جميع الجوانب -->
<div class="border">حد افتراضي 1px</div>
<div class="border-0">بدون حد</div>
<div class="border-2">حد 2px</div>
<div class="border-4">حد 4px</div>
<div class="border-8">حد 8px</div>

<!-- حد على جوانب محددة -->
<div class="border-t-4">حد علوي فقط</div>
<div class="border-r-4">حد أيمن فقط</div>
<div class="border-b-4">حد سفلي فقط</div>
<div class="border-l-4">حد أيسر فقط</div>

<!-- دمج جوانب مختلفة -->
<div class="border-t-2 border-b-2">حدود علوية وسفلية</div>
<div class="border-x-4">حدود يسار ويمين (أفقي)</div>
<div class="border-y-4">حدود علوية وسفلية (عمودي)</div>

<!-- حالة استخدام شائعة: بطاقة مع حد لهجة -->
<div class="border border-gray-200 border-l-4 border-l-blue-500 p-4 rounded">
    <h3 class="font-bold">عنوان البطاقة</h3>
    <p>محتوى البطاقة مع حد لهجة أيسر</p>
</div>

ألوان الحدود

تتبع ألوان الحدود نفس لوحة الألوان مثل النص وألوان الخلفية. استخدم أدوات border-{color} لتنسيق الحدود:

<!-- ألوان حدود أساسية -->
<div class="border-2 border-gray-300">حد رمادي</div>
<div class="border-2 border-blue-500">حد أزرق</div>
<div class="border-2 border-red-500">حد أحمر</div>
<div class="border-2 border-green-500">حد أخضر</div>

<!-- ألوان مختلفة على جوانب مختلفة -->
<div class="border-4 border-gray-200 border-t-blue-500">
    حد علوي ملون
</div>

<div class="border-2 border-gray-200 border-l-green-500 border-l-4">
    حد أيسر مميز
</div>

<!-- استخدام الشفافية مع الحدود -->
<div class="border-2 border-blue-500/50">حد بشفافية 50%</div>
<div class="border-2 border-red-500/25">حد بشفافية 25%</div>

<!-- حدود تفاعلية -->
<input
    type="text"
    class="border-2 border-gray-300 focus:border-blue-500 px-4 py-2 rounded transition-colors"
    placeholder="ركز لتغيير الحد"
>

<!-- مؤشرات الحالة مع ألوان الحدود -->
<div class="border-l-4 border-l-green-500 bg-green-50 p-4 rounded">
    <p class="text-green-800">رسالة نجاح</p>
</div>

<div class="border-l-4 border-l-red-500 bg-red-50 p-4 rounded">
    <p class="text-red-800">رسالة خطأ</p>
</div>

<div class="border-l-4 border-l-yellow-500 bg-yellow-50 p-4 rounded">
    <p class="text-yellow-800">رسالة تحذير</p>
</div>

أنماط الحدود

يوفر Tailwind أدوات لأنماط الحدود الصلبة والمتقطعة والمنقطة:

<!-- أنماط حدود مختلفة -->
<div class="border-2 border-solid border-gray-400">حد صلب (افتراضي)</div>
<div class="border-2 border-dashed border-gray-400">حد متقطع</div>
<div class="border-2 border-dotted border-gray-400">حد منقط</div>
<div class="border-2 border-double border-gray-400">حد مزدوج</div>
<div class="border-2 border-none">بدون حد</div>

<!-- حالات استخدام عملية -->
<!-- منطقة رفع متقطعة -->
<div class="border-2 border-dashed border-gray-300 hover:border-blue-500 rounded-lg p-8 text-center cursor-pointer transition-colors">
    <svg class="mx-auto h-12 w-12 text-gray-400">...</svg>
    <p class="mt-2 text-gray-600">انقر للرفع أو اسحب وأفلت</p>
</div>

<!-- فاصل منقط -->
<div class="border-t-2 border-dotted border-gray-300 my-6"></div>

<!-- صندوق رمز القسيمة -->
<div class="border-2 border-dashed border-green-500 bg-green-50 p-4 rounded-lg">
    <p class="text-green-800 font-semibold">رمز الترويج: SAVE20</p>
</div>

الزوايا المستديرة

تتحكم أدوات rounded-{size} في نصف قطر الحد، مما يخلق زوايا مستديرة:

<!-- استدارة أساسية -->
<div class="rounded-none">بدون استدارة (مربع)</div>
<div class="rounded-sm">استدارة صغيرة (2px)</div>
<div class="rounded">استدارة افتراضية (4px)</div>
<div class="rounded-md">استدارة متوسطة (6px)</div>
<div class="rounded-lg">استدارة كبيرة (8px)</div>
<div class="rounded-xl">استدارة كبيرة جداً (12px)</div>
<div class="rounded-2xl">استدارة 2XL (16px)</div>
<div class="rounded-3xl">استدارة 3XL (24px)</div>
<div class="rounded-full">استدارة كاملة (دائرية)</div>

<!-- استدارة زوايا محددة -->
<div class="rounded-t-lg">زوايا علوية مستديرة</div>
<div class="rounded-r-lg">زوايا يمنى مستديرة</div>
<div class="rounded-b-lg">زوايا سفلية مستديرة</div>
<div class="rounded-l-lg">زوايا يسرى مستديرة</div>

<!-- زوايا فردية -->
<div class="rounded-tl-lg">مستدير علوي أيسر</div>
<div class="rounded-tr-lg">مستدير علوي أيمن</div>
<div class="rounded-br-lg">مستدير سفلي أيمن</div>
<div class="rounded-bl-lg">مستدير سفلي أيسر</div>

<!-- حالات استخدام شائعة -->
<!-- زر -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600">
    زر مستدير
</button>

<!-- زر حبة -->
<button class="bg-green-500 text-white px-8 py-2 rounded-full hover:bg-green-600">
    زر حبة
</button>

<!-- صورة رمزية -->
<img src="avatar.jpg" class="w-12 h-12 rounded-full" alt="مستخدم">

<!-- بطاقة مع زوايا مستديرة -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
    <h3 class="font-bold text-lg">عنوان البطاقة</h3>
    <p class="text-gray-600 mt-2">محتوى البطاقة</p>
</div>

<!-- شارة -->
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">
    جديد
</span>

<!-- علامة تبويب مع أعلى مستدير -->
<button class="bg-white px-6 py-3 rounded-t-lg border border-b-0 border-gray-200">
    علامة تبويب نشطة
</button>

أدوات التقسيم

تضيف أدوات divide حدوداً بين العناصر الفرعية، وهي مثالية للقوائم والشبكات:

<!-- فواصل أفقية -->
<div class="divide-y divide-gray-200">
    <div class="py-3">العنصر 1</div>
    <div class="py-3">العنصر 2</div>
    <div class="py-3">العنصر 3</div>
</div>

<!-- فواصل عمودية -->
<div class="flex divide-x divide-gray-300">
    <div class="px-4">القسم 1</div>
    <div class="px-4">القسم 2</div>
    <div class="px-4">القسم 3</div>
</div>

<!-- عرض ولون تقسيم مخصص -->
<div class="divide-y-2 divide-blue-500">
    <div class="py-4">العنصر 1</div>
    <div class="py-4">العنصر 2</div>
</div>

<!-- تقسيم مع نمط -->
<div class="divide-y divide-dashed divide-gray-300">
    <div class="py-3">فاصل متقطع</div>
    <div class="py-3">بين العناصر</div>
</div>

<!-- قائمة تنقل مع فواصل -->
<nav class="bg-white border border-gray-200 rounded-lg divide-y divide-gray-200">
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">لوحة التحكم</a>
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">الملف الشخصي</a>
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">الإعدادات</a>
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">تسجيل الخروج</a>
</nav>

<!-- شبكة إحصائيات مع فواصل عمودية -->
<div class="flex divide-x divide-gray-200 bg-white border border-gray-200 rounded-lg">
    <div class="flex-1 p-6 text-center">
        <div class="text-3xl font-bold text-gray-900">2,543</div>
        <div class="text-sm text-gray-600 mt-1">المستخدمون</div>
    </div>
    <div class="flex-1 p-6 text-center">
        <div class="text-3xl font-bold text-gray-900">1,234</div>
        <div class="text-sm text-gray-600 mt-1">المبيعات</div>
    </div>
    <div class="flex-1 p-6 text-center">
        <div class="text-3xl font-bold text-gray-900">98%</div>
        <div class="text-sm text-gray-600 mt-1">الرضا</div>
    </div>
</div>

أدوات الحلقة

تنشئ أدوات الحلقة حدود نمط المخطط التفصيلي التي لا تؤثر على التخطيط، وهي مثالية لحالات التركيز:

<!-- حلقات أساسية -->
<button class="bg-white px-4 py-2 rounded ring-2 ring-blue-500">
    حد حلقة
</button>

<button class="bg-white px-4 py-2 rounded ring-4 ring-green-500">
    حلقة أكثر سمكاً
</button>

<!-- حلقة مع شفافية -->
<button class="bg-blue-500 text-white px-4 py-2 rounded ring-4 ring-blue-300">
    حلقة مع لون
</button>

<!-- حلقات التركيز لإمكانية الوصول -->
<input
    type="text"
    class="border border-gray-300 px-4 py-2 rounded focus:outline-none focus:ring-4 focus:ring-blue-300 focus:border-blue-500"
    placeholder="ركز لرؤية الحلقة"
>

<button class="bg-green-500 text-white px-6 py-3 rounded-lg focus:outline-none focus:ring-4 focus:ring-green-300">
    زر مع حلقة التركيز
</button>

<!-- إزاحة الحلقة -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-4 ring-blue-300 ring-offset-2 ring-offset-white">
    حلقة مع إزاحة
</button>

<!-- إزاحة حلقة خلفية داكنة -->
<div class="bg-gray-900 p-8">
    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-gray-900">
        حلقة على خلفية داكنة
    </button>
</div>

<!-- حلقة داخلية -->
<button class="bg-white border-2 border-gray-300 px-4 py-2 rounded ring-2 ring-inset ring-blue-500">
    حلقة داخلية
</button>

أدوات المخطط التفصيلي

تنشئ أدوات المخطط التفصيلي حدوداً خارج العنصر، مشابهة للحلقات ولكن مع خيارات تنسيق مختلفة:

<!-- مخططات تفصيلية أساسية -->
<button class="bg-white px-4 py-2 rounded outline outline-2 outline-blue-500">
    زر مخطط تفصيلي
</button>

<button class="bg-white px-4 py-2 rounded outline-dashed outline-2 outline-gray-400">
    مخطط تفصيلي متقطع
</button>

<button class="bg-white px-4 py-2 rounded outline-dotted outline-2 outline-gray-400">
    مخطط تفصيلي منقط
</button>

<!-- إزاحة المخطط التفصيلي -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg outline outline-2 outline-blue-300 outline-offset-2">
    مخطط تفصيلي مع إزاحة
</button>

<!-- مخطط تفصيلي للتركيز -->
<button class="bg-green-500 text-white px-4 py-2 rounded focus:outline focus:outline-2 focus:outline-green-300 focus:outline-offset-2">
    مخطط تفصيلي للتركيز
</button>

<!-- إزالة المخطط التفصيلي الافتراضي -->
<button class="bg-blue-500 text-white px-4 py-2 rounded outline-none focus:ring-4 focus:ring-blue-300">
    بدون مخطط تفصيلي، استخدم الحلقة بدلاً من ذلك
</button>

ظلال الصندوق

تضيف الظلال عمقاً وارتفاعاً إلى واجهتك. يوفر Tailwind أدوات ظل من الدقيقة إلى الدرامية:

<!-- أحجام الظل -->
<div class="shadow-sm">ظل صغير</div>
<div class="shadow">ظل افتراضي</div>
<div class="shadow-md">ظل متوسط</div>
<div class="shadow-lg">ظل كبير</div>
<div class="shadow-xl">ظل كبير جداً</div>
<div class="shadow-2xl">ظل 2XL</div>
<div class="shadow-none">بدون ظل</div>

<!-- ظل داخلي -->
<div class="shadow-inner">ظل داخلي (منقوش)</div>

<!-- ظلال ملونة -->
<div class="shadow-lg shadow-blue-500/50">ظل أزرق</div>
<div class="shadow-lg shadow-red-500/50">ظل أحمر</div>
<div class="shadow-lg shadow-green-500/50">ظل أخضر</div>

<!-- ظلال تفاعلية -->
<button class="bg-white border border-gray-200 px-6 py-3 rounded-lg shadow hover:shadow-lg transition-shadow">
    مرر لمزيد من الظل
</button>

<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all p-6 cursor-pointer">
    <h3 class="font-bold text-lg">بطاقة تمرير</h3>
    <p class="text-gray-600 mt-2">يزداد الظل عند التمرير</p>
</div>

<!-- مستويات الارتفاع لتصميم المواد -->
<div class="bg-white rounded-lg shadow-sm p-4">المستوى 1 - دقيق</div>
<div class="bg-white rounded-lg shadow p-4">المستوى 2 - بطاقة</div>
<div class="bg-white rounded-lg shadow-md p-4">المستوى 3 - مرتفع</div>
<div class="bg-white rounded-lg shadow-lg p-4">المستوى 4 - نموذج</div>
<div class="bg-white rounded-lg shadow-xl p-4">المستوى 5 - منبثق</div>
<div class="bg-white rounded-lg shadow-2xl p-4">المستوى 6 - الحد الأقصى</div>

<!-- زر مع حالات الظل -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg active:shadow-sm transition-shadow">
    زر الظل التفاعلي
</button>

ظل الإسقاط

ظلال الإسقاط هي ظلال قائمة على الفلتر تتبع شكل الصور الشفافة والنص:

<!-- ظل الإسقاط على الصور -->
<img src="icon.png" class="drop-shadow-sm" alt="أيقونة">
<img src="icon.png" class="drop-shadow" alt="أيقونة">
<img src="icon.png" class="drop-shadow-md" alt="أيقونة">
<img src="icon.png" class="drop-shadow-lg" alt="أيقونة">
<img src="icon.png" class="drop-shadow-xl" alt="أيقونة">
<img src="icon.png" class="drop-shadow-2xl" alt="أيقونة">
<img src="icon.png" class="drop-shadow-none" alt="أيقونة">

<!-- ظل الإسقاط على النص -->
<h1 class="text-4xl font-bold text-white drop-shadow-lg">
    نص مع ظل الإسقاط
</h1>

<!-- ظل الإسقاط على الأيقونات/SVG -->
<svg class="w-12 h-12 text-blue-500 drop-shadow-md">
    <!-- محتوى SVG -->
</svg>

<!-- مقارنة: box-shadow مقابل drop-shadow -->
<div class="flex gap-8">
    <div>
        <img src="star.png" class="shadow-lg" alt="ظل الصندوق">
        <p class="text-sm mt-2">ظل الصندوق (مستطيل)</p>
    </div>
    <div>
        <img src="star.png" class="drop-shadow-lg" alt="ظل الإسقاط">
        <p class="text-sm mt-2">ظل الإسقاط (يتبع الشكل)</p>
    </div>
</div>

دمج الحدود والزوايا والظلال

أنشئ تصميمات متطورة من خلال دمج هذه الأدوات:

<!-- تصميم بطاقة حديث -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg transition-all p-6">
    <div class="flex items-center gap-4">
        <img src="avatar.jpg" class="w-16 h-16 rounded-full border-2 border-gray-200" alt="مستخدم">
        <div>
            <h3 class="font-bold text-lg">جون دو</h3>
            <p class="text-gray-600">مصمم منتج</p>
        </div>
    </div>
</div>

<!-- بطاقة تسعير -->
<div class="relative bg-white border-2 border-blue-500 rounded-2xl shadow-xl p-8">
    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
        <span class="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-semibold shadow-lg">
            شائع
        </span>
    </div>
    <h3 class="text-2xl font-bold mt-2">خطة Pro</h3>
    <p class="text-4xl font-bold mt-4">29$<span class="text-lg text-gray-600">/شهر</span></p>
    <button class="w-full bg-blue-500 text-white py-3 rounded-lg mt-6 hover:bg-blue-600 shadow-md hover:shadow-lg transition-all">
        ابدأ الآن
    </button>
</div>

<!-- مكون التنبيه -->
<div class="border-l-4 border-l-yellow-500 bg-yellow-50 rounded-r-lg shadow-sm p-4">
    <div class="flex items-start gap-3">
        <svg class="w-6 h-6 text-yellow-600 flex-shrink-0">!</svg>
        <div>
            <h4 class="font-semibold text-yellow-900">تحذير</h4>
            <p class="text-yellow-800 mt-1">يرجى مراجعة معلوماتك قبل الإرسال.</p>
        </div>
    </div>
</div>

<!-- التحكم المقسم -->
<div class="inline-flex bg-gray-100 rounded-lg p-1 shadow-inner">
    <button class="bg-white shadow px-4 py-2 rounded-md font-medium text-sm">
        نشط
    </button>
    <button class="px-4 py-2 rounded-md font-medium text-sm text-gray-600 hover:text-gray-900">
        غير نشط
    </button>
    <button class="px-4 py-2 rounded-md font-medium text-sm text-gray-600 hover:text-gray-900">
        معطل
    </button>
</div>

<!-- بطاقة ميزة مع صورة -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow">
    <img src="feature.jpg" class="w-full h-48 object-cover" alt="ميزة">
    <div class="p-6 border-t-4 border-t-blue-500">
        <h3 class="text-xl font-bold">عنوان الميزة</h3>
        <p class="text-gray-600 mt-2">يتم وصف الميزة هنا.</p>
        <button class="mt-4 text-blue-600 font-semibold hover:text-blue-700">
            اعرف المزيد ←
        </button>
    </div>
</div>

<!-- مجموعة الإدخال -->
<div class="flex">
    <span class="inline-flex items-center px-4 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg text-gray-600">
        @
    </span>
    <input
        type="text"
        class="flex-1 border border-gray-300 px-4 py-2 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-500"
        placeholder="اسم المستخدم"
    >
</div>

الملخص

في هذا الدرس، أتقنت الحدود والزوايا المستديرة والظلال في Tailwind CSS:

• عرض الحد: التحكم في السمك على جميع الجوانب أو الجوانب الفردية
• ألوان الحدود: لوحة ألوان كاملة مع دعم الشفافية
• أنماط الحدود: حدود صلبة ومتقطعة ومنقطة ومزدوجة
• الزوايا المستديرة: من الدقيقة إلى الدائرية الكاملة مع التحكم في الزوايا الفردية
• أدوات التقسيم: إضافة حدود بين العناصر الفرعية
• أدوات الحلقة: حدود نمط المخطط التفصيلي مثالية لحالات التركيز
• أدوات المخطط التفصيلي: بديل للحلقات مع المزيد من خيارات التنسيق
• ظلال الصندوق: إنشاء عمق مع مستويات ظل مختلفة
• ظلال الإسقاط: ظلال قائمة على الفلتر للصور الشفافة

هذه الأدوات أساسية لإنشاء واجهات احترافية ومصقولة. ادمجها بعناية لتأسيس تسلسل بصري وتحسين سهولة الاستخدام وإنشاء تصميمات جميلة.