ميخائيل 2016-06-11 1 HTML و CSS 0

كيف يتم عمل حد مزدوج في css؟

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

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

حد مزدوج مع مربع الظل

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

ديف (
الخلفية: # E0D8A3 ؛
العرض: 180 بكسل ؛
الارتفاع: 110 بكسل ؛
الحشو: 12 بكسل ؛
}

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

ظل الصندوق: 0 0 0 1px # 000 ، 0 0 0 10px # E0D8A3 ؛

هكذا تبدو:

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

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

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

فقط لحظة من انتباهك:نريد جميعًا استضافة مواقعنا على استضافة موثوقة. لقد حللت المئات من الاستضافة ووجدت أفضلها - هوست آي كيوهناك المئات من المراجعات الإيجابية عنه عبر الإنترنت ، ومتوسط ​​تقييم المستخدم هو 4.8 من 5. نرجو أن تكون مواقعك سعيدة.

فلاد مرزفيتش

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

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

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

• يتم رسم مخطط تفصيلي حول العنصر (الحد في الداخل) ؛
• لا يؤثر المخطط التفصيلي على أبعاد العنصر (تتم إضافة الحد إلى عرض العنصر وارتفاعه) ؛
• يمكن تعيين المخطط التفصيلي فقط حول العنصر بأكمله ، وليس على الجوانب الفردية (يمكن استخدام الحد على أي جانب أو الكل مرة واحدة) ؛
• لا يتأثر المخطط التفصيلي بنصف قطر التقريب الذي تحدده خاصية 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

وصف

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

بناء الجملة

القيم

تحدد قيمة عرض الحد سمك الحد. يتم توفير العديد من قيم نمط الحدود للتحكم في مظهرها. تظهر أسمائهم ونتائج الإجراء في الشكل. واحد.

رسم بياني 1. أنماط الإطار

يعيّن لون الحدود لون الحد ، ويمكن أن تكون القيمة بأي تنسيق CSS صالح.

يرث يرث قيمة الوالد.

HTML5 CSS2.1 IE Cr Op Sa Fx

يضيف هذا المثال حدًا مزدوجًا حول الطبقة. النتيجة موضحة في الشكل. 2.

أرز. 2. تطبيق خاصية الحدود

نموذج الكائن

document.getElementById ("elementID") .style.border

المتصفحات

يعرض Internet Explorer حتى الإصدار 6 ويتضمن عرضًا منقطًا متقطعًا بسمك حد 1 بكسل. بسماكة 2 بكسل أو أكثر ، تعمل القيمة المنقطة بشكل صحيح. تم إصلاح هذا الخطأ في IE7 ، ولكن فقط لجميع حدود 1 بكسل. إذا كان أحد حدود المربع بسماكة 2 بكسل أو أكثر ، فإن القيمة المنقطة في IE7 تصبح متقطعة.

لا يدعم Internet Explorer حتى الإصدار 7.0 ويتضمن القيمة الموروثة.

قد يختلف نمط الحدود قليلاً بين المتصفحات عند استخدام قيم groove أو ridge أو inset أو outset.

وصف

يضبط نمط الحد حول العنصر. يُسمح بتعيين أنماط فردية لجوانب مختلفة من العنصر.

بناء الجملة

نمط الحدود: (1،4) | يرث

القيم

يتم توفير العديد من قيم خصائص نمط الحدود للتحكم في مظهر الحد. المظهر يعتمد على المتصفح المستخدم وسمك الحد المحدد. جدول يوضح الشكل 1 أسماء الأنماط والإطار الناتج بقيم سماكة مختلفة - 1 و 3 و 5 و 7 بكسل.

بالإضافة إلى القيم المدرجة في الجدول ، يتم استخدام الكلمات الأساسية التالية.

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

يُسمح باستخدام قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم ، مع فصلها بمسافة. التأثير يعتمد على المبلغ والمشار إليه في الجدول. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

أرز. 1. تطبيق خاصية نمط الحدود

نموذج الكائن

document.getElementById ("elementID") .style.borderStyle

المتصفحات

يعرض Internet Explorer حتى الإصدار 6 ويتضمن عرضًا منقطًا متقطعًا بسمك حد 1 بكسل. بسماكة 2 بكسل أو أكثر ، تعمل القيمة المنقطة بشكل صحيح. تم إصلاح هذا الخطأ في IE7 ، ولكن فقط لجميع حدود 1 بكسل. إذا كان أحد حدود المربع بسماكة 2 بكسل أو أكثر ، فإن القيمة المنقطة في IE7 تصبح متقطعة.

Internet Explorer حتى الإصدار 7.0 ويتضمن ذلك لا يدعم القيم المخفية والوراثة.

قد يختلف نمط الحدود قليلاً بين المتصفحات عند استخدام قيم groove أو ridge أو inset أو outset.

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

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

المعلمات التي تميز الإطار: 1) سمك الإطار ، 2) نمط الإطار و 3) لون الإطار. ودعنا نذهب بالترتيب:

• 1. سمك الإطار: عرض الحدود: 2 بكسل;
• 2. نمط الإطار: نمط الحدود: صلب;
• 3. لون الإطار: لون الحدود: # ff0000;

ما هي أنماط الإطارات في CSS؟ فيما يلي جميع أنماط الحدود المتاحة:

• منقط - إنه إطار منقط.
• متقطع - هذا إطار منقط
• صلب - هذا إطار صلب
• مزدوج - هذا إطار مزدوج
• أخدود - عرض حجمي
• ريدج - عرض حجمي
• أقحم - عرض حجمي
• البداية - عرض حجمي

لدينا الآن كل شيء لإنشاء حدود حول العنوان.

لغة البرمجة

ينشئ حدًا حول العنوان.

والأسلوب نفسه للإطار.

H2 (عرض الحدود: 2 بكسل ؛ نمط الحدود: صلب ؛ لون الحدود: # FF0000 ؛)

نتيجة لذلك ، حد أحمر متصل بسمك 2 بكسل.

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

• أعلى - قمة.
• الصحيح - حق
• الأسفل - الأسفل
• اليسار - اليسار

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

H2 (عرض الحد السفلي: 2 بكسل ؛ نمط الحد السفلي: مزدوج ؛ لون الحد السفلي: # FF0000 ؛)

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

H2 (عرض الحد السفلي: 2 بكسل ؛ نمط الحد السفلي: مزدوج ؛ لون الحد السفلي: # FF0000 ؛ عرض أعلى الحدود: 2 بكسل ؛ نمط الحد العلوي: مزدوج ؛ لون الحد العلوي: # FF0000 ؛)

سيحتوي العنوان الآن على حد أحمر حول الجزء العلوي والسفلي. يمكن أن يتم الشيء نفسه بالنسبة للأطراف الأخرى.

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

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

أي عندما يرى المتصفح مثل هذا الرمز المختصر الحدود: 2 بكسل صلب # ff0000; ، سيُنشئ أيضًا حدًا على الجوانب الأربعة للعنوان. هذا الترميز المختصر مكافئ لتلك التي استخدمناها أعلاه (حيث تم تطبيق ثلاث خصائص).

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

H2 (الحد العلوي: 2 بكسل صلب # ff0000 ؛)

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

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