إنشاء الحدود في CSS. خاصية الحدود. إنشاء حدود باستخدام CSS css مزدوج الحدود

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

تسهل هذه الخاصية القيام بأشياء لا تصدق كانت تتطلب من 3 إلى 8 صور ومعالجة العلامات.

التحديث:العمل في Firefox منذ الإصدار 29.

حجم الصورة يساوي سمك الإطار. يتم تجاهل لون وأسلوب الحدود.

إذا قمت فقط بتعيين مصدر صورة الحدود ، فإن الصورة تملأ الزوايا ، ولا تعرف ما يجب فعله بعد ذلك:

الحدود: 80 بكسل شفافة صلبة ؛ صورة الحدود: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png") ؛

شريحة صورة الحدود

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

القيم الممكنة:

<проценты>- محسوبة بالنسبة لحجم الصورة. أفقي بالنسبة للعرض ، عمودي - نسبة إلى الارتفاع.<числа>- بكسل (لـ نقطية) أو إحداثيات (للناقل). وحدات القياس غير محددة. يملأ - كلمة رئيسيةاستكمال القيم السابقة. إذا تم تحديد ذلك ، فلن يتم اقتصاص الصورة بالحافة الداخلية للإطار ، ولكنها تملأ أيضًا المنطقة داخل الإطار. مفيد جدا للإطارات المستديرة.

يمكن فصل القيم المتعددة بمسافات لتحديد القيم لكل جانب.

يجب أن يكون مجموع قيم الأضلاع المتقابلة أقل من حجم الصورة ، وإلا فلن يكون هناك ما يملأ الفراغ بين الزوايا.

الحدود: 80 بكسل شفافة صلبة ؛ صورة الحدود: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png") ؛ شريحة صورة الحدود: 100 ؛

تكرار الصورة الحدودية

تحدد الخاصية كيفية سد الفجوات بين الزوايا.

القيم الممكنة: التمدد - يمد مساحة ملء الصورة. القيمة الافتراضية؛ كرر - يكرر قسم التعبئة ، بينما تكون المفاصل مع صورة الزاوية مرئية ؛ دائري - يملأ الفراغ بين الزوايا. قد يكون التماس في منتصف الجانب مرئيًا. الإجراء الأكثر دقة. الفضاء - يتصرف مثل التكرار. لم أجد فرقا.

يمكنك تعيين قيمتين في وقت واحد ، الأولى ستكون مسؤولة عن سلوك الصورة في الإطارات العلوية والسفلية ، والثانية - لليسار واليمين.

صورة الحدود: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png") ؛ شريحة صورة الحدود: 100 ؛ تكرار صورة الحدود: كرر ؛

على اليسار كرر ، على اليمين دائري.

إذا كان الإطار معقدًا والجوانب لا تتلاءم جيدًا معًا ، فسيعمل التمدد بشكل صحيح ، وإليك مثال.

عرض صورة الحدود

عرض صورة الحدود

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

القيم الممكنة:<длина>- القيم بالبكسل أو م ؛<%>- القيم بالنسبة المئوية بالنسبة لحجم الصورة ؛<числа>- قيمة رقمية يتم بها ضرب عرض الحدود تلقائيًا - كلمة أساسية. إذا تم تحديدها ، فإن القيمة تساوي شريحة صورة الحدود المقابلة. إذا لم يكن هناك حجم مناسب ، فسيتم استخدام قيمة عرض الحدود ، وتملأ الصورة الزاوية الكاملة للحد ، وتزحف أسفل المحتوى. يعمل بغرابة بعض الشيء.

الحدود: 60 بكسل شفافة صلبة ؛ صورة الحدود: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png") ؛ شريحة صورة الحدود: 80 ؛ تكرار صورة الحدود: دائري ؛ عرض صورة الحدود: 160 بكسل ؛

على اليمين يوجد حد مع عرض صورة الحدود. يوضح المثال الموجود على اليسار كيف تم اقتصاص الصورة من الحواف الداخلية للإطار. نظرًا لزيادة العرض ، تم الزحف إلى الإطار الأيمن أسفل المحتوى.

بداية الصورة الحدودية

خاصية مثيرة للاهتمام تسمح لك بتحريك الإطار خارج العنصر. القيم السلبية غير مدعومة.

القيم الممكنة:<длина>- القيم بالبكسل أو م ؛<числа>هي القيمة الرقمية التي يتم ضرب عرض الحدود بها.

الحدود: 60 بكسل شفافة صلبة ؛ صورة الحدود: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png") ؛ شريحة صورة الحدود: 120 ؛ تكرار صورة الحدود: دائري ؛ صورة الحدود الخارجية: 60 بكسل 10 بكسل 50 بكسل 120 بكسل ؛

على اليمين مثال مع صورة الحدود الخارجية. لا تؤثر هذه الخاصية على أبعاد العنصر ، ويمكن أن يتداخل الحد مع العناصر المجاورة.

ملكية CSS – « الحدود»، يسمح لك بتعيين سمك ولون ونوع خط المحيط حول العنصر. يمكن كتابة معلمات هذه الخاصية في سطر واحد ، مفصولة بمسافات وبأي ترتيب.

• - عرض الخط بكسل واحد
• - خط الصلبة
• - لون أبيض
• - لون أسود
• - اللون الرمادي

حد العنصر الصلب

حد العنصر المتقطع

حد العنصر المنقط

حد العنصر بخط مزدوج

ممتلكات أقسام فردية من الحدود

إطار مموج مدمج في الحجم

إطار مموج محدب في الحجم

إطار منخفض الحجم

إطار محدب الحجمي

دروس / CSS /

الدرس 7. تأطير عنصر CSS

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

الحدود

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

بناء الجملة لخاصية الحدود كما يلي:

الحدود: نوع العرض اللون؛
يمكنك اختيار ترتيب مختلف لتحديد قيم الخاصية ، ولكن الشيء الرئيسي هو من خلال الفضاء.

يجب تحديد سمك (عرض) الإطار بالبكسل (بكسل) أو النسبة المئوية (٪).
يمكن تحديد اللون إما بتنسيق RGB (أحمر أخضر أزرق) ، أو بتنسيق HTML HEX code.

أدناه هي أنواع الخطبأسمائهم:

كيفية تعيين الحدود على عنصر؟ نقوم بما يلي:

#منع (
الحد: 3 بكسل صلب # 0085cc ؛ / * تعيين خط أزرق 3 بكسل * /
}

إذا كنت ترغب في تثبيت واحد ، اثنان ، ثلاثة إطارات من جانب معين، ثم نشير إليه على النحو التالي:

أعلى الحد- إطار في الأعلى ؛
الحد السفلي- إطار في الأسفل ؛
يسار الحد- إطار على اليسار ؛
يمين الحدود- الإطار على اليمين ؛

حاجز (
الحد الأيمن: 3 بكسل صلب # 0085cc ؛
الحد السفلي: 2 بكسل متقطع # 0085cc ؛
}

إذا أردت أن إزالة الإطاراتعنصر في CSS ، ثم اكتب في حد الخاصية - لا شيء

فارغة (
الحدود: لا شيء ؛ / * العنصر الذي يحتوي على فئة فارغة لن يكون له حدود * /
}

الخطوط العريضة

المخطط التفصيلي هو الخاصية التي تحتاجها لتعيين الحد الخارجي للعنصر.

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

المخطط التفصيلي: 2 بكسل منقط # 0085cc ؛ / * حد أزرق منقط بحجم 2 بكسل * /
بالنسبة إلى المخطط التفصيلي ، وكذلك للحدود ، يمكنك إزالة الحدود بكتابة لا شيء:

شكرا للانتباه!

المقال السابق
الدرس 6.

حدود العنصر.

المساحة المتروكة والهوامش في CSS. ما هو الهامش والحشو؟ المقال التالي
الدرس الثامن: كيفية ضبط لون النص وخلفية عنصر في CSS؟

تعليقات على المقال (vk.com)

الحدود

دعم المتصفح

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

وصف

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

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

ملاحظة: لتعيين الحدود على جوانب معينة فقط من عنصر ما ، استخدم الخصائص التالية: border-top ، و border-bottom ، و border-left ، و border-right.

نصيحة: بشكل عام ، عند استخدام حد ، تحتاج إلى إضافة المساحة المتروكة.

خاصية CSS: الحدود

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

بناء الجملة

الحدود: لون الحدود بنمط عرض الحدود | وراثة ؛

قيم الممتلكات

مثال

هناك بعض النص هنا.

نتيجة هذا المثالفي نافذة المتصفح:

كيفية ضبط لون ونمط وحجم الحدود في المربعات.

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

سمة الحدود

تمنحنا أوراق الأنماط المتتالية مزيدًا من الخيارات ، ولكن أول الأشياء أولاً.

في CSS ، يمكننا التحكم في عرض الحدود باستخدام عرض الحدود، أو بشكل أكثر دقة ، يمكننا التحكم في سمك كل جانب على حدة:
عرض أعلى الحد- سمك الحافة العلوية
عرض يمين الحد- سمك الحد الأيمن
عرض أسفل الحد- سمك الحد السفلي
عرض يسار الحد- سمك الحد الأيسر
ولكن يمكن أن يكون هناك أيضًا نموذج مختزل:
P (عرض الحدود: أعلى اليمين ، أسفل اليسار ؛)(أعلى اليمين أسفل اليسار).
يمكن ضبط عرض الحافة:
الأرقام DIV (عرض الحدود: 5 بكسل) ، من صفر إلى ما لا نهاية ، أي إيجابي.
نحيف- حد رفيع ، DIV (عرض الحدود: رفيع)
واسطة- حد متوسط ​​، DIV (عرض الحدود: متوسط)
سميك- حد سميك ، DIV (عرض الحدود: سميك)
الأمر واضح مع الأرقام ، لكن مع هذه القيم ، كل هذا يتوقف على المتصفح ، ولكن لا يزال نحيف<= medium <= thick .

يمكننا أيضًا التحكم في لون الحدود باستخدام لون الحدودأو لنكون أكثر دقة مع لون كل جانب:
لون أعلى الحدودأعلى لون الحدود
لون يمين الحدودلون الحدود الصحيح
لون الحد السفليلون الحد السفلي
لون الحدود اليسرىلون الحد على الجانب الأيسر.
يتم تعيين قيمة اللون على اللون، بمعنى آخر. واحد من 16 لونًا: أكوا ، أسود ، أزرق ، فوشيا ، رمادي ، أخضر ، ليموني ، كستنائي ، بحري ، زيتوني ، أرجواني ، أحمر ، فضي ، أزرق مخضر ، أبيض أو أصفر، يمكن أيضًا ضبط الألوان: اللون: # 000000, اللون: # AF0 , اللون: rgb (255،0،0)أو اللون: RGB (100٪ ، 0٪ ، 0٪).
بغض النظر عن نظام الألوان الذي تختاره ، ستستمر المتصفحات في ترجمته إليه اللون: rgb (255،0،0)... على سبيل المثال اللون: الجير = اللون: # 00ff00 = اللون: # 0F0 = اللون: rgb (0٪ ، 100٪ ، 0٪)ولكن بالنسبة للمتصفح لا يهم اللون: rgb (0،255،0)، بمعنى آخر. سوف تحسب هذه القيمة.

إذا كان يمكن التحكم في سمك ولون الحدود بواسطة HTML ، فإن النمط ( نمط الحدود) CSS فقط !!!
يمكن التحكم في النمط من كل جانب على حدة:
أعلى الحدودأعلى نمط الحدود ؛
نمط يمين الحدودنمط الحدود الصحيح
نمط الحد السفلينمط الحد السفلي
نمط يسار الحدودنمط الحدود على الجانب الأيسر.
الآن دعونا نلقي نظرة على قيم النمط:
1)نمط الحدود: لا شيء- هذا هو الإعداد الافتراضي ، على غرار عرض الحدود: 0.
2)نمط الحدود: مخفي- نفس الشيء باستثناء الجداول التي سننظر فيها لاحقًا.
3)نمط الحدود: منقط- حد منقط.
4)نمط الحدود: متقطع- حد خط منقط.
5)نمط الحدود: صلب- حد خط متصل ، أي مثل HTML.
6)نمط الحدود: مزدوج- حد خط متصل مزدوج ، هنا تحتاج إلى عرض حد لا يقل عن 3 بكسل.
7)نمط الحدود: الأخدود- تبدو الحدود وكأنها مقطوعة في القماش.
8)نمط الحدود: ريدج- تبدو الحدود وكأنها بارزة من القماش.
9)نمط الحدود: أقحم- يبدو الصندوق بأكمله وكأنه مضغوط في القماش.
10)نمط الحدود: البداية- مقابل سابقتها.
قد تتجاهل بعض المتصفحات القيم: منقط ، ومتقطع ، ومزدوج ، وأخدود ، وحافة ، وإدراج وإخراج ، وإخراجها على أنها صلبة ، أي. الحد المعتاد.

كل هذا صحيح بالطبع ، لكن كل الأمثلة المذكورة أعلاه ليست سوى مبدأ تشغيل ، وليست آلية.
ملكية القاعدة الحدوديعني (الحدود: لون نمط الحجم ؛) ، يتم تنفيذ هذه القاعدة إذا كانت جميع القيم الثلاث موجودة وبهذا الترتيب فقط ، على سبيل المثال H1 (الحد: 5 بكسل أحمر مزدوج ؛)، ولكن قد تكون هناك استثناءات إذا تم توفير هذه القيم بواسطة لغات الترميز ، على سبيل المثال ، لجدول TABLE (الحد: 2 بكسل)، بمعنى آخر. تم تحديد قيمة واحدة فقط.

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

الاستثناء هو هذه القاعدة:
H1 (
الحدود: 4 بكسل خضراء صلبة ؛
}
الشيء هو أن القاعدة الأخيرة لها الأولوية القصوى في CSS ، وفي هذه الحالة تحتوي خاصية الحدود على يسار الحد وبالتالي سيتم تجاهل قاعدة يسار الحدود ، تمامًا كما يلي:
H1 (
الحدود: 4 بكسل خضراء صلبة ؛
يسار الحد: 2 بكسل أحمر مزدوج ؛
}
منذ البداية ، وضعنا قواعد الرصيف بالكامل ، ثم للمناطق الفردية.

لدي كل شيء على حدود العناصر ، باستثناء أننا سننظر في بعض الخصائص عندما نصل إلى الجداول والاستثناءات الأخرى.

CSS: الحدود. حدود العنصر.

حدود CSS3

حدود CSS3

باستخدام CSS3 ، يمكنك إنشاء حدود مستديرة وإضافة ظلال إلى الحاويات واستخدام صورة كحدود - بدون استخدام برنامج تصميم مثل Photoshop.

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

• نصف قطر الحد
• مربع الظل
• صورة الحدود

دعم المتصفح

ملكية	دعم المتصفح
نصف قطر الحد
مربع الظل
صورة الحدود

يدعم Internet Explorer 9 بعض خصائص الحدود الجديدة.

يتطلب Firefox البادئة -moz- لصورة الحدود.

يتطلب كل من Chrome و Safari البادئة -webkit- لصورة الحدود.

يتطلب Opera البادئة -o- لصورة الحدود.

يتطلب Safari أيضًا البادئة -webkit- لـ box-shadow.

يدعم Opera خصائص الحدود الجديدة.

زوايا دائرية CSS3

كانت إضافة الزوايا الدائرية إلى CSS2 صعبة. كان علينا استخدام صور مختلفة لكل زاوية.

في CSS3 ، من السهل إنشاء زوايا مستديرة.

في CSS3 ، تُستخدم خاصية border-radius لإنشاء زوايا مستديرة:

هذه الكتلة لها زوايا مستديرة!

CSS3 Box Shadow

في CSS3 ، تُستخدم خاصية box-shadow لإضافة الظلال إلى الحاويات:

CSS3 Border-Image

باستخدام خاصية CSS3 border-image ، يمكنك استخدام صورة لإنشاء حد:

تسمح لك خاصية صورة الحدود بتحديد صورة الحدود!

الصورة الأصلية المستخدمة لإنشاء الحدود هي لك:

خصائص الحدود الجديدة

سمة الحدود

سمة الحدود، بطاقة شعار

، تستخدم لتحديد سمك الحد حول الجدول.

حدود HTML

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

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

القيم

يمكن أن تكون قيمة السمة أي رقم غير سالب يحدد الحجم بالبكسل.

القيمة الافتراضية: 0.

بناء الجملة

السمة المطلوبة: لا شيء.

مثال HTML: تطبيق سمة الحدود

نتيجة المثال

نتيجة. تطبيق سمة الحدود.

فلاد مرزفيتش

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

خاصية المخطط التفصيلي

أبسط خاصية لإنشاء الإطارات. لها نفس معلمات الحدود ، لكنها تختلف عنها بشكل كبير في بعض التفاصيل:

• يتم رسم مخطط تفصيلي حول العنصر (الحد في الداخل) ؛
• لا يؤثر المخطط التفصيلي على أبعاد العنصر (تتم إضافة الحد إلى عرض العنصر وارتفاعه) ؛
• يمكن تعيين المخطط التفصيلي فقط حول العنصر بأكمله ، ولكن ليس على الجوانب الفردية (يمكن استخدام الحدود لأي جانب أو الكل مرة واحدة) ؛
• لا يتأثر المخطط التفصيلي بنصف قطر التقريب الذي تحدده خاصية border-radius (تتأثر الحدود).

السؤال الذي يطرح نفسه - في أي الحالات يكون المخطط التفصيلي مطلوبًا ، عندما يكون دوره ، على الرغم من الاختلافات المذكورة ، مفروضًا بشكل كامل من قبل الحدود؟ لا يوجد الكثير من المواقف ، لكنها تحدث:

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

إطارات متعددة الألوان

يجب أن يكون مفهوما أن المخطط التفصيلي لا يحل بأي حال من الأحوال محل الحدود وقد يوجد به ، كما هو موضح في المثال 1.

مثال 1. إنشاء إطار

في هذا المثال ، تمت إضافة حد أسود حول العنصر ، والذي يتم فصله عن الخلفية بحد أبيض (الشكل 1).

أرز. 1. إطار حول العنصر

الإطار عند استخدام: مرر

تؤدي إضافة حد عبر الحدود إلى زيادة عرض العنصر ، وهو أمر يمكن ملاحظته تمامًا عند دمج الحد و: hover-class pseudo-class. هناك طريقتان لكيفية "الفوز" بهذا. أبسط شيء هو استبدال الحدود بالخطوط العريضة ، والتي نعلم أنها لا تؤثر على أبعاد العنصر (المثال 2).

مثال 2. إطار عند التحويم

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

مثال 3. إطار عند التحويم

الحدود حول حقول النموذج

في بعض المتصفحات (Chrome ، Safari ، الإصدارات الحديثة من Opera) ، يظهر حد ملون صغير حول حقول النموذج عندما يتم التركيز عليها (الشكل 2). لإزالته ، ما عليك سوى إضافة قيمة لا شيء إلى خاصية المخطط التفصيلي في الأنماط ، كما هو موضح في المثال 4.

أرز. 2. إطار حول الحقول

مثال 4. إزالة الإطار

الإطارات عبر Box-shadow

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

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

يوضح المثال 4 كيفية إضافة حدين وحد واحد إلى اليمين باستخدام خاصية box-shadow.

مثال 4. استخدام ظل الصندوق

تظهر نتيجة هذا المثال في الشكل. 3.

أرز. 3. الإطارات التي تم إنشاؤها بواسطة خاصية box-shadow

أحد التطبيقات الممتعة لخاصية CSS3 box-shadow هو إنشاء حد مزدوج حول عنصر. تأثير مثير للاهتمام للغاية لتزيين الصفحة ، ولكنه لن يعمل إلا في الإصدارات الأحدث من المتصفحات التي تدعم box-shadow.

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

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

الطريقة 1: الحدود والمخطط التفصيلي

تعمل هذه الطريقة فقط في المتصفحات التي تدعم خاصية المخطط التفصيلي (جميعها باستثناء IE6 / 7). تقوم بإضافة خصائص الحدود والمخطط التفصيلي إلى العنصر.

واحد (الحد: صلب 6 بكسل #fff ؛ مخطط تفصيلي: صلب 6 بكسل # 888 ؛)

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

الطريقة الثانية: العنصر الزائف

تتطلب هذه الطريقة تحديد موضع الإطار بشكل مطلق:

اثنان (الحد: صلب 6 بكسل #fff ؛ الموضع: نسبي ؛ z-index: 1 ؛). اثنان: قبل (المحتوى: "" ؛ عرض: كتلة ؛ الموضع: مطلق ؛ أعلى: -12 بكسل ؛ يسار: -12 بكسل ؛ الحدود: صلب 6 بكسل # 888 ؛ العرض: 312 بكسل ؛ الحشو السفلي: 12 بكسل ؛ الحد الأدنى للارتفاع: 100٪ ؛ مؤشر z: 10 ؛)

تقوم النقاط الرئيسية بتعيين خاصية z-index (بحيث يتداخل العنصر الزائف مع المحتوى) ، وتحديد الموضع ، وقيمة min-height. الخاصية الأخيرة تحافظ على مرونة الإطار.

الطريقة الثالثة: الظل

أفضل طريقة لأنها تتطلب سطرًا واحدًا فقط من التعليمات البرمجية مع إعدادات خاصية box-shadow.

ثلاثة (مربع الظل: 0 0 0 6px #fff، 0 0 0 12px # 888؛)

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

مثل خاصية المخطط التفصيلي ، لا يؤثر box-shadow على العناصر المجاورة ويمكن أن يتداخل معها. لذلك ، من الضروري تعيين حقل لتشكيل مظهر التكوين.

بطبيعة الحال ، يقتصر دعم خاصية box-shadow على المتصفحات الأحدث.

الطريقة الرابعة: عنصر div الإضافي

تستخدم هذه الطريقة عنصرًا خارجيًا