كتلة Css ذات زوايا مستديرة. عناصر شريحة الصورة الحدودية

الحجم 200×200 بكسل:

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

BorderElement ( لون الخلفية: #EEDDFF؛ الحدود: 6 بكسل صلب # 7922CC؛ نصف قطر الحدود: 25 بكسل؛ ) .borderElement1 (لون الخلفية: #FFE8DB؛ الحدود: 6 بكسل صلب #FF5A00؛ نصف قطر الحدود: 15 بكسل 100 بكسل 15 بكسل 100 بكسل؛ )

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

BorderElement (لون الخلفية: #EEDDFF؛ الحدود: 6 بكسل صلب #7922CC؛ نصف قطر الحدود: 280 بكسل/100 بكسل؛)

يمكنك مزج القيم (أي استخدام كل من الشكل العادي والبيضاوي المدور بنفس النمط)، ويمكنك أيضًا إضافة نمط شخصي لكل زاوية باستخدام الخصائص المناسبة:

• Border-top-left-radius - للزاوية العلوية اليسرى؛
• نصف القطر من أعلى إلى اليمين - في الزاوية اليمنى العليا؛
• نصف القطر من أسفل إلى يسار - للزاوية اليسرى السفلية؛
• نصف القطر الأيمن السفلي - للزاوية اليمنى السفلية.

مبدأ تقريب الزوايا

توضح الصورة أدناه كيفية حساب تقريب الزاوية في CSS. لذا، إذا تم تحديد قيمة واحدة للزاوية - على سبيل المثال، 20 بكسل - فهذا يعني أن التقريب سيحدث على طول دائرة نصف قطرها 20 بكسل. في حالة تحديد قيمتين مفصولتين بشرطة مائلة، على سبيل المثال، 30px/20px، سيتم تقريب الزوايا على طول القطع الناقص. القيمة الأولى في هذه الحالة هي طول نصف المحور الأفقي للقطع الناقص - 30 بكسل، والقيمة الثانية هي طول نصف المحور الرأسي - 20 بكسل:

خاصية border-radius لـ CSS مدعومة من قبل جميع المتصفحات الحديثة.

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

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

الزوايا الدائرية في CSS 3 بدون صور

يستخدم هذا المثال خصائص من CSS 3 تسمح لك بتدوير الزوايا بسهولة دون مساعدة الصور.

مثال HTML وCSS: تقريب الزوايا باستخدام CSS 3 بدون صور

وصف المثال

1. لتقريب الزوايا، نستخدم خاصية CSS 3، والتي تفهمها جميع المتصفحات الحديثة.
2. بالنسبة للمتصفحات الأقدم مثل Firefox وChrome وSafari، نستخدم خصائص خاصة مع البادئات -moz- و-webkit-، والتي ظهرت قبل دعم الخاصية الرئيسية. لسوء الحظ، لا توجد نظائر مماثلة للأوبرا القديمة وIE. يرجى ملاحظة أنه عند إنشاء تقريبات معقدة، قد لا تعمل الخصائص ذات البادئات بشكل صحيح تمامًا. هذا هو السبب في أنها مدرجة في كود CSS أعلى من الخاصية الرئيسية، بحيث وفقًا لـ أولويات الأسلوب، المتصفحات التي تفهم كلمة "خالص" بالفعل استخدمتها.

الخصائص ذات البادئات ليست موجودة في مواصفات CSS، لذا فإن استخدامها سيؤدي إلى رمز غير صالح.

الزوايا الدائرية في CSS بدون صور

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

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

مثال HTML وCSS: تقريب الزوايا دون استخدام الصور

وصف المثال

1. داخل الكتلة ذات الفئة = "block" نشير إلى عنصر للمحتوى الرئيسي ("content_block") نضع أمامه كتلًا لمحاكاة تقريب الزوايا ("b1" و "b2" و "b3"). وبعدها نضعهم بنفس الطريقة ولكن بترتيب عكسي.
2. لقد قمنا بتعيين كتل المحاكاة على الارتفاع والهوامش الجانبية المطلوبة (CSS) لإنشاء مظهر الزوايا. نقوم أيضًا بإعادة ضبط حجم الخط (CSS) وضبطه على: مخفي - وهذا مخصص للمتصفحات الأقدم التي قد تزيد من الارتفاع وتجعله أكبر من المحدد.
3. في هذا المثال، بالإضافة إلى تقريب الزوايا، تمت إضافة تقليد للإطار أيضًا؛ إذا لم تكن بحاجة إليه، فما عليك سوى إزالة جميع "الحدود" من العناصر، وإزالة لون الخلفية من "b3" حاجز.

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

مثال HTML وCSS: تقريب الزوايا باستخدام صورة واحدة

وصف المثال

1. باستخدام خاصية CSS، قمنا بتعيين صورة خلفية للكتلة، والتي نمنع تكرارها رأسيًا وأفقيًا (بدون تكرار)، لأنه في هذه الحالة ليس مطلوبًا.
2. لمنع النص الموجود داخل الكتلة من لمس حوافها، قمنا بتعيين المساحة المتروكة لها (CSS) على 5 بكسل على كل جانب.
3. بعد ذلك، تحتاج إلى ضبط الكتلة على نفس أبعاد الخلفية. تبلغ أبعاد صورة الخلفية 140 × 32 بكسل، ولكننا نحدد العرض (CSS) والارتفاع (CSS) للكتلة نفسها، مع تقليلهما بمقدار 10 بكسل. اضطررت إلى تقليله بسبب نفس الحشوات الداخلية، والتي تعمل أيضًا على توسيع العنصر بمقدار 5 بكسل في كل اتجاه.

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

تُستخدم هذه التقنية غالبًا لتقريب العناصر ذات السطر الواحد، مثل الروابط أو عناوين الأقسام/القوائم.

مثال HTML وCSS: تقريب الزوايا باستخدام SideBlocks

وصف المثال

1. داخل فئة الكتلة = "block" نضع عنصرين - "left_bok" و"right_bok"، ونضع عليهما صور الأجزاء الجانبية كخلفية (CSS) ونحظر إعادة إنتاجها (بدون تكرار). بالنسبة للكتلة الرئيسية نفسها، قمنا بتعيين الخلفية من الجزء المركزي ونسمح بتكرارها أفقيًا فقط (كرر x).
2. نحدد عرض الكتل الجانبية المتوافقة مع حجم الخلفية؛ وهو 14x32 بكسل بالنسبة لنا. لكن بالنسبة للكتلة الرئيسية، كما في المثال السابق، قمنا بتعيين الارتفاع إلى 22 بكسل للتعويض عن الحشو الرأسي.
3. سنقوم بوضع جدراننا الجانبية بالنسبة إلى "الكتلة"، لذلك نحدد: نسبة لها، ومطلقة للجدران الجانبية نفسها. حسنًا، بعد ذلك نضغطهم على الجوانب المقابلة للأصل باستخدام خصائص CSS و .
4. لمنع إخفاء محتويات الكتلة تحت الصور الجانبية، قمنا بتعيين "block" بحيث تحتوي على حشوة جانبية (CSS)، والتي يمكن أن تكون مساوية أو أكبر قليلاً من الجوانب نفسها. نقوم أيضًا بتعيين هوامش صغيرة في الأعلى والأسفل حتى لا "يلتصق" النص بالحواف.

يوجد خطأ صغير في IE6 بهذه الطريقة:

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

دعونا نفعل ذلك بشكل مختلف. لنقم بضبط الهامش الأيسر "right_bok" (CSS) على 100% بحيث يتجاوز الحد الأيمن للكتلة الرئيسية، ثم نعيده مرة أخرى، ونحركه إلى اليسار بعدد بكسلات يساوي عرضه. يعمل IE6 بشكل صحيح مع قيم هذه الخصائص، لذلك ليس لديه خيار سوى وضع الكتلة حيث نحتاجها.

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

مثال HTML وCSS: تقريب الزوايا باستخدام العناصر الزائفة الجانبية

وصف المثال

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

بالنسبة لـ IE6 وIE7، تم استخدام "العكازات" التالية في هذا المثال:

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

الزوايا الدائرية في CSS باستخدام التفاف الكتلة

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

مثال HTML وCSS: تقريب الزوايا باستخدام Block Wrap

وصف المثال

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

يمكنك ضبط عرض الكتلة بشكل صريح عن طريق تحديد الخاصية المطلوبة في class="block" ، ولكن لتغيير الارتفاع يجب عليك استخدام العنصر الأعمق (بالنسبة لنا هو "rb").

الزوايا الدائرية في CSS باستخدام تحديد المواقع

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

مثال HTML وCSS: تقريب الزوايا باستخدام تحديد المواقع

وصف المثال

1. داخل العنصر الرئيسي (class= "block") نضع أربع علامات مع الفئات "corn_lt" و "corn_rt" و "corn_lb" و "corn_rb" والتي ستكون بمثابة كتل زاوية.
2. باستخدام خاصية CSS، نقوم بتوصيل صورة الخلفية الخاصة بنا بكل كتلة زاوية ونضبط عرضها وارتفاعها ليكونا متساويين في الحجم مع صور الخلفية هذه. فقط في حالة إعادة ضبط حجم الخط (CSS) وإزالة الفائض (CSS).
3. نحدد الموضع النسبي للعنصر الرئيسي (CSS:نسبي)، لأننا سنضع كتل الزوايا بالنسبة إليه، وبالنسبة للزوايا نفسها - مطلق (مطلق).
4. باستخدام خصائص CSS و ، نحدد مسافات الإزاحة الرأسية والأفقية للكتل الركنية بحيث تقع في زوايا الكتلة الرئيسية.

توجد مشكلتان في هذه الطريقة في IE6:

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

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

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

مثال HTML وCSS: تقريب الزوايا باستخدام تحديد المواقع والعفاريت

وصف المثال

1. باستخدام خاصية CSS، نقوم بتوصيل صورة متحركة للخلفية إلى كتل الزوايا، والتي لها شكل دائري بأبعاد 22x22 بكسل (11x11 بكسل لكل ربع زاوية).
2. باستخدام خاصية CSS، نحدد إحداثيات إزاحة الخلفية. على سبيل المثال، تعني القيمة -11 بكسل 0 أنه سيتم إزاحة الخلفية إلى اليسار بمقدار 11 بكسل على المحور X، ولكن لن يتم إزاحتها على المحور Y. وهكذا فإن النصف الأيسر من الكائن يتجاوز حدود العنصر ويبقى النصف الأيمن فقط. لكنه نصف مرئي فقط، حيث يبلغ ارتفاعه 22 بكسل، وارتفاع كتلة الزاوية نفسها 11 بكسل فقط. لذلك اتضح أنه بهذه القيمة، ستكون خلفية العنصر هي الربع الأيمن العلوي من الكائن.

مع IE6 هناك نفس المشاكل كما في المثال السابق.

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

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

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

مثال HTML وCSS: تقريب الزوايا باستخدام العناصر الزائفة

الخلفية وبمساعدتها نضعها على الجانب الأيمن ونحظر "الاستنساخ". هذا كل شيء، الزوايا جاهزة.

نظرًا لأننا حددنا الحشو لـ "الكتلة" (CSS)، فإن العناصر الزائفة، وبالتالي الزوايا، لا تقع في زوايا الكتلة، ولكنها تبعد 15 بكسل عن الحواف. لإصلاح ذلك، نعطي العناصر الزائفة هوامش سلبية (CSS) على الجوانب الضرورية لوضعها أعلى المسافات البادئة. لكننا جعلنا الهوامش تساوي ليس 15، بل 17 بكسل، وهذا ضروري لتغطية الإطار (CSS)، الذي يبلغ عرضه 2 بكسل (15+2=17). هذا كل شيء الآن.

بالنسبة لـ IE6 وIE7، استخدمنا "العكازات" المألوفة بالفعل مع إدخال كود HTML هنا، نظرًا لأن هذه المتصفحات لا تفهم العناصر الزائفة المستخدمة هنا:

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

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

مثال آخر على تقريب الزوايا بعناصر زائفة وبدون كتل إضافية

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

مثال HTML وCSS: زوايا مستديرة حيث يمكنك تغيير ارتفاع الكتلة

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

1. نضيف أربع علامات داخل "الكتلة" ونطبق تحديد المواقع عليها. وبعد ذلك نعرض لهم ببساطة زوايا الصورة كخلفية ونضعها في زوايا العنصر الرئيسي. أي أننا نتصرف تمامًا كما هو الحال في إحدى الطرق التي تمت مناقشتها أعلاه.
2. للتخلص من خطأ البكسل الواحد (الذي تم ذكره أكثر من مرة أعلاه)، أضف هامشًا أيسرًا (CSS) بقيمة 100% وإزاحة سالبة تساوي -9 بكسل لعناصر الزاوية اليمنى. بشكل عام، إذا كنت تتذكر، يجب أن تكون هذه الإزاحة مساوية لعرض كتلة الزاوية (بالنسبة لنا هي 11 بكسل)، لكن لا تنس الحد 2 بكسل الموجود لدينا هنا - نحتاج إلى وضع الزوايا فوقها (11px-2px=9px).

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

في Firefox، تعمل هذه الطريقة بشكل صحيح من الإصدار 3.6، وفي Opera - من الإصدار 10.0، لم أتوصل إلى عكازات لهم، لأن هذا ليس له أهمية كبيرة.

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

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

العلامات المباشرة (يختلف الجدول الثاني في تخطيط الخلايا في الصف العلوي):

Curabitur في ultricies الجرة	فاسيلوس موليس
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero actor الدهليز.	0

خالية من الحمل.	أورنا أغسطس.	Nunc iaculis bibendum.
		مؤقت الدهليز	لاوريت إيروس semper ut.
Vivamus quis nisi lacus.	Cras id felis eu Purus tempor dictum in at lorem.	Facilisis iaculis magna diam id quam. com.eleifend.	دورة رائعة، سهلة الاستخدام

1. قم بتدوير الزوايا مباشرة على الطاولة (علامة الجدول).

BContentTables( border:1px Solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; الهامش: 0.7em تلقائي؛

2. قم بإزالة أي خلفية من السطر الأول.

Tr.bCTable_Header (الخلفية: لا شيء؛)

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

Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- نصف قطر الحدود: 10 بكسل 0 0 0; -o-border-radius:10px 0 0 0; لون الخلفية:#00843C;)

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

Tr.bCTable_Header:الطفل الأول > td:الأخير-الطفل( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- نصف قطر الحدود:0 10px 0 0; -o-border-radius:0 10px 0 0;

5. قم بتدوير الزوايا السفلية للسطر الأخير. لا تنس إزالة الخلفية من السطر الأخير؛ يتم تعيين خلفية الصف بواسطة خلفية خلايا الصف الأخير.

BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px;

6. ثم، قياسا على النقاط 3-4، في السطر الأخير نقوم بتقريب زوايا الخلايا الأولى والخارجية.

BContentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;) . bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- نصف القطر:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0);

دعم المتصفح

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

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

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

ومع ذلك، أصبح تقريب الزوايا باستخدام CSS أكثر شيوعًا. كما قد تكون قد فهمت بالفعل، سنستخدم في هذه المقالة خاصية متوفرة في CSS 3.

الزوايا الدائرية باستخدام CSS.

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

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

وهذه هي الطريقة التي سنراها في متصفح الويب:

الآن، لتقريب الزوايا، سوف نستخدم خاصية "border-radius"، والتي يمكن ترجمتها على أنها نصف قطر الحدود. نعم، هكذا بالضبط، وليس كما قد يعتقد الكثيرون، أن هذا هو نصف قطر الإطار أو كما يسمونه (الحدود). هذه الخاصية مسؤولة تحديدًا عن نصف قطر حدود العنصر، وليس عن إطاراته أو حدوده التي قد لا تكون موجودة. ومع ذلك، ستظل الخاصية تعمل دون استخدام حد على العنصر. أتمنى أن تكون قد فهمت ما أردت قوله. قيمة هذه الخاصية هي أي قيمة رقمية قابلة للتطبيق في CSS، مثل النسب المئوية والبكسل (px) والنقاط (pt) وما إلى ذلك. نعم، ويجب الأخذ في الاعتبار أن هذه الخاصية تعمل على جميع أركان العنصر الأربعة في وقت واحد، بالإضافة إلى ذلك، يمكنك تحديد نصف قطر مختلف لكل زاوية، ولكن المزيد عن ذلك لاحقًا. أولاً، دعونا نحدد نصف قطر زوايا المستطيل. دعها تساوي 5 بكسل:

ثم سيبدو العنصر هكذا:

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

نصف قطر الحدود من أعلى اليسار: 5 بكسل؛ /* الزاوية اليسرى العليا */ border-top-right-radius:5px; /* الزاوية اليمنى العليا */ border-bottom-right-radius:5px; /* الزاوية اليمنى السفلى */ border-bottom-left-radius:5px; /* أسفل الزاوية اليسرى */

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

ومن ثم نحصل على هذه النتيجة:

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

حيث ستتبع القيم بهذا الترتيب:

نصف قطر الحدود: 5px /* الزاوية اليسرى العليا */ 10px /* الزاوية اليمنى العليا */ 15px /* الزاوية اليمنى السفلية */ 20px /* الزاوية اليسرى السفلية */;

وعليه، وبناءً على ما سبق، يصبح من الواضح أنه بنفس الطريقة يمكننا تعيين حدود نصف القطر فقط لثلاث زوايا (واحدة أو اثنتين):

وهذا ما يبدو عليه في متصفح الويب:

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

في هذا المثال، أثرنا فقط على الزاوية اليسرى العليا من العنصر:

إذا قمت بعكس القيم، فسيبدو العنصر كما يلي:

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

والحصول على هذه النتيجة:

الآن دعونا نلقي نظرة على مثال أكثر تعقيدًا:

في هذه الحالة، سترتبط القيمة قبل علامة الشرطة المائلة (/) بنصف القطر الأفقي للزاوية، وبعد الإشارة بالقيمة الرأسية. في هذه الحالة سترتبط القيم ببعضها البعض بهذه الطريقة:

نصف قطر الحدود من أعلى اليسار: 20 بكسل 15 بكسل؛ نصف القطر من أعلى اليمين: 10 بكسل 25 بكسل؛ نصف القطر من أسفل إلى يمين: 40 بكسل 15 بكسل؛ نصف القطر من أسفل إلى يسار: 10 بكسل 25 بكسل؛

وستكون النتيجة هكذا:

وفي نهاية المقال سنتحدث عن دعم هذه الخاصية من قبل المتصفحات المختلفة.

تقريب الزوايا في متصفحات الويب المختلفة.

ومن الجدير بالذكر هنا أن هذه الخاصية غير مدعومة في جميع إصدارات المتصفح. الخاصية مدعومة في IE9+، Firefox 4+، Chrome، Safari 5+، وOpera.
لكن بالنسبة لبعض إصدارات المتصفح التي لا تدعم هذه الخاصية، هناك خصائص غير قياسية تضيف ما يسمى بالبادئة أو البادئة إلى الخاصية.
يستخدم Chrome قبل الإصدار 4.0، وSafari قبل الإصدار 5.0، وiOS الخاصية غير القياسية -webkit-border-bottom-left-radius.
يستخدم Firefox قبل الإصدار 4.0 الخاصية غير القياسية -moz-border-radius-bottomleft.
في هذه الحالة، سيتعين علينا تكرار الخاصية باستخدام هذه البادئات. على سبيل المثال، إذا قمنا بتعيين خاصية حد الزاوية اليسرى العليا بقيمة خمسة بكسلات:

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

ثم ستبدو الخاصية، بتكرارها باستخدام البادئات، كما يلي:

Webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; نصف قطر الحدود من أعلى اليسار: 5 بكسل؛

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