نصف قطر الحدود: الزوايا الدائرية في CSS. أساسيات استخدام حدود CSS

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

زوايا مستديرة وإطارات الصور

1. تقريب الزوايا بنصف القطر الحدودي

دعم المتصفح

أي: 9.0
ثعلب النار: 4.0
كروم: 4.0
سفاري: 5.0، 3.1 -مجموعة الويب-
الأوبرا: 10.5
سفاري iOS: 7.1
أوبرا ميني: —
متصفح أندرويد: 4.1
كروم لنظام أندرويد: 44

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

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

إذا قمت بتحديد قيمتين لـ خصائص الحدود-radius ، فسيتم تقريب القيمة الأولى أعلى اليسارو الزاوية اليمنى السفلى، والثانية - اعلى اليمينو أسفل اليسار.

القيم المحددة من خلال / تحديد أفقيو نصف القطر العمودي. الملكية ليست موروثة.

خيارات

Div (العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الحدود: 5 بكسل صلب؛).r1 (نصف قطر الحدود: 0 0 20 بكسل 20 بكسل;).r2 (نصف قطر الحدود: 0 10 بكسل 20 بكسل;).r3 (نصف قطر الحدود: 10 بكسل 20 بكسل;). ;) .r4 (نصف قطر الحدود: 10px/20px;) .r5 (نصف قطر الحدود: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (نصف قطر الحدود: 10px 20px 30px 40px/30px;) .r7 ( نصف قطر الحدود: 50%;).r8 (نصف القطر من أعلى إلى أسفل: لا شيء؛ حد من أسفل: لا شيء؛ نصف قطر الحدود: 30px/90px;).r9 (نصف قطر من أسفل إلى اليسار: 100px;).r10 ( حد -نصف القطر: 0 100%;).r11 (نصف قطر الحد: 0 50% 50% 50%;).r12 (نصف قطر الحد العلوي الأيسر: 100% 20 بكسل؛ نصف قطر الحد السفلي الأيمن: 100% 20 بكسل ؛)
أرز. 1. أمثلة على الخيارات المختلفة لتقريب زوايا الكتل

2. صورة الحدود

دعم المتصفح

أي: 11.0
ثعلب النار: 15.0، 3.5 موز-
كروم: 16.0، 7.0 -ويبكيت-
سفاري: 6.0، 3.0 -ويبكيت-
الأوبرا: 15.0، 11.0 -س-
سفاري iOS: 7.1
أوبرا ميني: 8 -س-
متصفح أندرويد: 4.4، 4.1 -مجموعة الويب-
كروم لنظام أندرويد: 42

تسمح لك الخاصية بتعيين صورة كإطار للعنصر. الشرط الرئيسي للصورة هو أنها يجب أن تكون متناظرة. تشتمل الخاصية على القيم التالية: (border-image: width source section Repeat outset;) .

بمساعدة هذا صورة بسيطةيمكنك الحصول على هذه الإطارات لعنصر ما.

/* مثال 1 */ div ( العرض: 260 بكسل; الارتفاع: 100 بكسل; نمط الحدود: صلب; عرض صورة الحدود: 15 بكسل; مصدر صورة الحدود: url(border_round.png); شريحة صورة الحدود: 30 ; تكرار صورة الحدود: امتداد) /* مثال 2 */ div ( العرض: 260 بكسل; الارتفاع: 100 بكسل; نمط الحدود: صلب; عرض صورة الحدود: 15 بكسل; مصدر صورة الحدود: url(border_round. png)؛ شريحة صورة حدودية: 30؛
أرز. 2. مثال لتصميم حدود الكتل باستخدام صورة

تشكل القطع A - B - C - D زوايا الإطار، وجزء الصورة الموجود بينها يملأ المساحة المتبقية من الإطار وفقًا للقيمة المحددة لخاصية border-image-repeat. يتم تعيين حجم جزء الزاوية (في هذا المثال الرقم 30) باستخدام قيمة خاصية border-image-slice.

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

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

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

بناء الجملة

Div (عرض الصورة الحدودية: 30 بكسل؛) الشكل. 3. مثال على ضبط عرض إطار الصورة باستخدام أنواع مختلفةقيم

2.2. مصدر صورة الحدود

تحدد الخاصية المسار إلى الصورة التي سيتم استخدامها لتزيين حدود الكتلة.

بناء الجملة

Div (مصدر صورة الحدود: url(border.png);)

2.3. عناصر شريحة الصورة الحدودية

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

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

بناء الجملة

Div (شريحة صورة الحدود: 50 20؛)
أرز. 4. مثال على تحديد شرائح إطار الصورة

2.4. تكرار صورة الحدود

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

بناء الجملة

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

2.5. الحدود-الصورة-البداية

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

بناء الجملة

Div (الحدود-الصورة-البداية: 10 بكسل؛)
أرز. 6. مثال على إزاحة إطار الصورة باستخدام أنواع مختلفة من القيم

3. إزاحة الإطار الخارجي إزاحة المخطط التفصيلي

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

/*الشكل 1:*/ img (الحدود: 1 بكسل وردي خالص؛ المخطط التفصيلي: 1 بكسل رمادي متقطع؛ إزاحة المخطط التفصيلي: 3 بكسل;) /*الشكل 2:*/ img (عرض الحدود: 1 بكسل 10 بكسل; نمط الحدود: صلب; لون الحدود: وردي؛ المخطط التفصيلي: 1 بكسل رمادي متقطع؛
أرز. 7. مثال لتزيين صورة بإطار خارجي

4. إطار التدرج

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

إطار شفاف

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

* (حجم الصندوق: صندوق حدود؛).التفاف ( الارتفاع: 200 بكسل؛ الحشو: 25 بكسل؛ الخلفية: #00E4F6؛ ) .تدرج (الارتفاع: 150 بكسل؛ العرض: 50%؛ الهامش: 0 تلقائي؛ الحد: 10 بكسل شفاف صلب صورة الحدود: تدرج خطي (إلى اليمين، شفاف 0%، #ADF2F7 100%)؛

ظرف بريدي

* (حجم الصندوق: صندوق الحدود؛).التفاف ( الارتفاع: 200 بكسل؛ الحشو: 25 بكسل؛ ) .التدرج (الارتفاع: 150 بكسل؛ العرض: 50%؛ الهامش: 0 تلقائي؛ الحد: 10 بكسل شفاف؛ صورة الحدود: 10 تكرار التدرج الخطي (45deg، #A7CECC، #A7CECC 10px، شفاف 10px، شفاف 20px، #F8463F 20px، #F8463F 30px، شفاف 30px، شفاف 40px )

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

معلومات مختصرة

التسميات

	وصف	مثال
<тип>	يشير إلى نوع القيمة.	<размер>
أ & ب	يجب أن يتم إخراج القيم بالترتيب المحدد.	<размер> && <цвет>
أ | ب	يشير إلى أنك تحتاج إلى تحديد قيمة واحدة فقط من القيم المقترحة (A أو B).	عادي | قبعات صغيرة
أ || ب	يمكن استخدام كل قيمة بشكل مستقل أو مع الآخرين بأي ترتيب.	العرض || عدد
	قيم المجموعات	[ اقتصاص || يعبر]
*	كرر صفر مرات أو أكثر.	[,<время>]*
+	كرر مرة واحدة أو أكثر.	<число>+
?	النوع أو الكلمة أو المجموعة المحددة اختيارية.	أقحم؟
(أ، ب)	كرر على الأقل A، ولكن ليس أكثر من B مرات.	<радиус>{1,4}
#	كرر مرة واحدة أو أكثر مفصولة بفواصل.	<время>#

×

قيم

يُسمح باستخدام قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم، مع إدراجها مفصولة بمسافة (الجدول 1). ومن المقبول أيضًا كتابة قيمتين مفصولتين بشرطة مائلة للأمام (/). القيم هي أرقام بأي تنسيق مقبول لـ CSS. عند استخدام النسب المئوية، يكون العدد مرتبطًا بعرض الكتلة.

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

أرز. 1. نصف القطر الدائري لإنشاء أنواع مختلفة من الزوايا

رمل

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

div ( الخلفية: #e4efc7؛ الحد: 1 بكسل صلب # 333؛ الحشو: 10 بكسل؛ نصف قطر الحدود: 0 ; )

مثال

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

أرز. 2. تقريب نصف القطر

نموذج الكائن

شيء.style.borderRadius

ملحوظة

يستخدم Chrome قبل الإصدار 4.0، وSafari قبل الإصدار 5.0، وAndroid قبل الإصدار 2.1 الخاصية -webkit-border-radius.

يستخدم Firefox قبل الإصدار 4.0 الخاصية -moz-border-radius.

تخصيص

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

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

×

أنا متأكد من أنك على دراية بخاصية Border CSS. هل ستتعلم أي شيء جديد لم تكن تعرفه من قبل عن حدود CSS؟ حسنًا، لن تتعلم فحسب، بل ستشاهد أيضًا العديد من الأشياء الجديدة التي لم تكن تعرفها من قبل!

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

أساسيات استخدام حدود CSS

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

الحدود: 1 بكسل أسود خالص؛

سيُخرج الكود أعلاه حدًا بحجم 1 بكسل سيكون باللون الأسود. ببساطة وسهولة. يمكنك أيضًا توسيع بناء الجملة قليلاً:

عرض الحدود: سميك؛ نمط الحدود: صلب؛ لون الحدود: أسود؛

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

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

صندوق (الحدود: 1 بكسل أحمر خالص؛ ) .الصندوق: تحويم (الحدود: 1 بكسل أخضر خالص؛)

الطريقة الأكثر أناقة وبساطة للقيام بذلك هي:

صندوق (الحدود: 1 بكسل أحمر خالص؛) .الصندوق:تحويم (لون الحدود: أخضر؛)

كما ترون، فإن التقنية المتقدمة مفيدة أيضًا عندما نغير فقط بعض الخصائص: العرض والنمط واللون وغيرها.

نصف القطر الحدودي

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

على الرغم من أنه من الضروري استخدام بادئات خاصة لـ Webkit وMozilla لكي يكون التصميم صحيحًا.

نصف قطر حدود Webkit: 10 بكسل؛ -moz-border-radius: 10px؛ نصف قطر الحدود: 10 بكسل؛

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

ميزة أخرى هي أنه يمكننا استخدام قيم خاصة لكل جانب من الكتلة:

نصف قطر الحدود من أعلى اليسار: 20 بكسل؛ نصف قطر الحدود من أعلى اليمين: 0؛ نصف قطر الحد السفلي الأيمن: 30 بكسل؛ نصف القطر من أسفل إلى يسار: 0؛

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

كما هو الحال مع الهامش والحشوة، يمكننا ضغط بناء الجملة:

/* أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار */ border-radius: 20px 0 30px 0;

كمثال لاستخدام خاصية border-radius، سأعرض لك "الليمون" الذي يستخدمه المصممون غالبًا عند تصميم مواقع الويب:

ليمون (العرض: 200 بكسل; الارتفاع: 200 بكسل; الخلفية: #F5F240; الحدود: 1 بكسل صلب #F0D900; نصف قطر الحدود: 10 بكسل 150 بكسل 30 بكسل 150 بكسل;)

دعونا نتجاوز الأساسيات

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

هياكل حدود CSS المعقدة

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

نمط الحدود

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

الحدود: أخدود 20 بكسل #e3e3e3؛

أو في بناء الجملة الموسع:

لون الحدود: #e3e3e3؛ عرض الحدود: 20 بكسل؛ نمط الحدود: الأخدود؛

على الرغم من أن هذه الخصائص مفيدة، إلا أنها ليست الأساس لإنشاء إطارات معقدة.

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

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

المربع (الحدود: 5 بكسل صلب # 292929؛ المخطط التفصيلي: 5 بكسل صلب #e3e3e3؛)

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

العناصر الزائفة

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

الصندوق (العرض: 200 بكسل؛ الارتفاع: 200 بكسل؛ الخلفية: #e3e3e3؛ الموضع: نسبي؛ الحد: 10 بكسل أخضر خالص؛) /* إنشاء صندوقين بنفس عرض الحاوية */ .box:after, .box:before ( المحتوى: ""؛ الموضع: اليسار المطلق: 0. المربع: بعد (الحدود: 5 بكسل أصفر خالص؛ ) . المربع: قبل (الحدود: 10 بكسل أزرق ثابت)

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

صندوق الظل

"طريقة الأطفال" المثيرة للاهتمام لإنشاء تأثير مماثل هي استخدام خاصية box-shadow في CSS3:

صندوق (الحدود: 5 بكسل أحمر خالص؛ ظل الصندوق: 0 0 0 5 بكسل أخضر، 0 0 0 10 بكسل أصفر، 0 0 0 15 بكسل برتقالي؛)

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

ولكن هناك مشكلة: في المتصفحات القديمة التي لا تفهم خاصية box-shadow، سيكون هناك إطار أحمر واحد فقط بحجم 5 بكسل مرئي.

"يتذكر! يجب أن يبدو تصميم الموقع عبر المتصفحات، أي هو نفسه في جميع المتصفحات. بما في ذلك الإصدارات الأقدم."

تغيير الزوايا

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

على سبيل المثال:

نصف قطر الحدود: 50 بكسل / 100 بكسل؛ /* نصف القطر الأفقي، نصف القطر العمودي */

... وهذا يعادل:

نصف القطر للحدود من أعلى اليسار: 50 بكسل 100 بكسل؛ نصف القطر من أعلى اليمين: 50 بكسل 100 بكسل؛ نصف القطر من أسفل إلى يمين: 50 بكسل 100 بكسل؛ نصف القطر من أسفل إلى يسار: 50 بكسل 100 بكسل؛

هذه التقنية مناسبة لإنشاء أشكال كتل فريدة. على سبيل المثال، إليك كيفية إنشاء تأثير الورق المغلف:

المربع (العرض: 200 بكسل؛ الارتفاع: 200 بكسل؛ الخلفية: #666؛ نصف قطر الحد العلوي الأيسر: 15 مترًا 1 مترًا؛ نصف قطر الحد السفلي الأيمن: 15 مترًا 1 مترًا؛)

نماذج CSS باستخدام الحدود

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

بالنسبة للأمثلة القليلة التالية، سوف نستخدم العلامات التالية:

...والنمط الأساسي التالي:

الصندوق (العرض: 200 بكسل؛ الارتفاع: 200 بكسل؛ الخلفية: أسود؛)

معظم مثال شائعاستخدام نماذج CSS - إنشاء سهم متدفق. يكمن سر هذا السهم في إنشاء حدود بلون مختلف لكل جانب. ثم قم بتعيين سمات العرض والارتفاع إلى 0.

دعونا نخصص ل كتلة شعبةفئة السهم:

السهم (العرض: 0؛ الارتفاع: 0؛ الحد العلوي: 100 بكسل أحمر خالص؛ الحد الأيمن: 100 بكسل أخضر خالص؛ الحد السفلي: 100 بكسل أزرق خالص؛ الحد الأيسر: 100 بكسل أصفر خالص؛)

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

السهم (العرض: 0؛ الارتفاع: 0؛ الحد: 100 بكسل صلب؛ لون الحدود: أحمر أخضر أزرق أصفر؛)

مثير للاهتمام، أليس كذلك؟ الآن سنقوم بتعيين الألوان الشفافة من جميع الجوانب ما عدا الجانب الأزرق.

السهم (العرض: 0؛ الارتفاع: 0؛ الحد: 100 بكسل صلب؛ لون الحد السفلي: أزرق؛)

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

إنشاء فقاعة الكلام

لإنشاء فقاعة كلام، نحتاج إلى قطعة صغيرة CSS النقيكود وكتلة div واحدة.

فقاعة الكلام ( الموضع: نسبي؛ لون الخلفية: #292929؛ العرض: 200 بكسل؛ الارتفاع: 150 بكسل؛ ارتفاع الخط: 150 بكسل؛ /* المركز عموديًا */ اللون: أبيض؛ محاذاة النص: المركز؛ )

فقاعة الكلام: بعد ( المحتوى: ""؛ )

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

فقاعة الكلام: بعد ( المحتوى: ""؛ الموضع: مطلق؛ العرض: 0؛ الارتفاع: 0؛ الحدود: 10 بكسل مصمت؛ لون الحدود: أحمر أخضر أزرق أصفر؛ )

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

فقاعة الكلام: بعد (المحتوى: ""؛ الموضع: مطلق؛ العرض: 0؛ الارتفاع: 0؛ الحد: 10 بكسل صلب؛ لون الحد العلوي: أحمر؛)

عندما ننشئ هذا شكل CSS، لا يمكننا تحديد حجم السهم على وجه التحديد. بدلًا من ذلك، يمكننا تعيين خاصية border-width، والتي ستعين حجمًا للسهم. سنقوم أيضًا بتعيين موضع السهم في الأسفل في المنتصف. وبناء على ذلك، لهذا نستخدم القيم أعلى ويسارا.

فقاعة الكلام: بعد ( المحتوى: ""؛ الموضع: مطلق؛ العرض: 0؛ الارتفاع: 0؛ الحد: 15 بكسل صلب؛ لون الحد العلوي: أحمر؛ أعلى: 100%؛ يسار: 50%؛ )

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

فقاعة الكلام ( /* ... أنماط أخرى */ نصف قطر الحدود: 10 بكسل؛ ) .فقاعة الكلام: بعد ( المحتوى: ""؛ الموضع: مطلق؛ العرض: 0؛ الارتفاع: 0؛ الحد: 15 بكسل صلب؛ الحد العلوي -اللون: #292929؛ الأعلى: 100%؛ الهامش الأيسر: -15 بكسل؛ /* ضبط عرض الحدود */ )

ليس سيئا، هاه؟ باستخدام العديد من فئات CSS وحيل الحدود، يمكنك إنشاء شيء من هذا القبيل.

/* استخدام فقاعات الكلام: قم بتطبيق الفصل .speech-فقاعة و.speech-فقاعة-DIRECTION كما هو موضح أدناه

*/ .فقاعة الكلام ( الموضع: نسبي؛ لون الخلفية: #292929؛ العرض: 200 بكسل؛ الارتفاع: 150 بكسل؛ ارتفاع الخط: 150 بكسل؛ /* المركز عموديًا */ اللون: أبيض؛ محاذاة النص: المركز؛ الحدود- نصف القطر: 10 بكسل؛ عائلة الخط: sans-serif؛ ) .فقاعة الكلام: بعد ( المحتوى: ""؛ الموضع: مطلق؛ العرض: 0؛ الارتفاع: 0؛ الحد: 15 بكسل صلب؛ ) /* ضع السهم */ .فقاعة الكلام-أعلى: بعد (لون الحد السفلي: #292929؛ اليسار: 50%؛ الأسفل: 100%؛ الهامش الأيسر: -15 بكسل؛ ) .فقاعة الكلام-يمين: بعد (لون الحد الأيسر : #292929؛ اليسار: 100%؛ الهامش العلوي: -15 بكسل؛ .speech-فقاعة-أسفل: بعد (لون الحد العلوي: #292929؛ أعلى: 100%؛ اليسار: 50%؛ الهامش الأيسر: -15 بكسل ) .فقاعة الكلام-اليسار:بعد (لون الحد الأيمن: #292929؛ الأعلى: 50%؛ اليمين: 100%؛ الهامش العلوي: -15 بكسل؛ )

علاوة! توسيط عمودي داخل الكتلة

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