يرجى ملاحظة أنه يتم إدخال أنماط CSS لشكل معين في الملف مرة واحدة، ولكن يمكن وضع علامة HTML لعدد غير محدود من المرات على الموقع.

ونتيجة للإخراج نحصل على ما يلي مستطيل مع الإطار.

كيفية عمل زوايا مستديرة في CSS

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

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

سوف تعطينا علامة div HTML مستطيل في إطار مدوروالزوايا:

وستبدو علامة HTML لعرض النص كما يلي:

pib9.ru

نحن نحصل مستطيل مستدير الزواياوالنص:

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

1. لا يوجد نص

في هذه الحالة، تأخذ النماذج أبعاد البيئة: الطول يتوافق مع عرض الحقل، ويتغير الارتفاع مع امتلاء النموذج بالمحتوى.

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

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

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

1. الزاوية اليسرى العليا.

2. الزاوية اليمنى العليا.

3. الزاوية اليمنى السفلى.

4. الزاوية اليسرى السفلى.

ينتج عن هذا مستطيل ذو منحنيات محددة في الزوايا العلوية فقط.

يتم حساب الزوايا في اتجاه عقارب الساعة، بدءاً من الزاوية اليسرى العليا:

2. تقريب الزوايا باستخدام كود HTML دون الكتابة إلى ملف النمط

دعونا نلقي نظرة على الطريقة الثانية للحصول على مستطيل بزوايا مستديرة باستخدام كود HTML دون الكتابة في ملف النمط.

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

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

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

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

3. الصور ذات الزوايا الدائرية. إطار حول صورة HTML

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

ويتم ذلك بكل بساطة، والآن سوف نتعلم كيفية القيام بذلك.

لنضع الصورة على الموقع، ونجعلها خلفيتها الخاصة كخلفية لعلامة div. نحصل على الكود والصورة التالية:

تقريب زوايا الصورة عن طريق إضافة إطار

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

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

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

يبدو كود HTML للطريقة الثانية، دون استخدام ملف النمط الموصوف في هذه المقالة، كما يلي:

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

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

في البرنامج التعليمي اليوم سأوضح لك كيف يمكنك ذلك زوايا المائدة المستديرة باستخدام 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);

دعم المتصفح

إطار 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 يمكن تقريب كل زاوية على حدة.

إذا قمت بتعيين قيمتين لخاصية border-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 (الحد العلوي: لا شيء؛ الحد السفلي: لا شيء؛ نصف قطر الحدود: 30 بكسل/90 بكسل؛).r9 (نصف القطر للحدود السفلية اليسرى: 100 بكسل؛).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 )

تحيات أصدقاء. هذه المقالة مخصصة لموضوع شائع إلى حد ما بين مشرفي المواقع المبتدئين - زوايا مدورة 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 فقط.
كل التوفيق لك!

CTRL + N، أو حدد وظيفة "إنشاء" في القائمة المنسدلة من القائمة "ملف". بعد ذلك، من نفس القائمة، حدد عملية "استيراد" أو اتصل بها باستخدام مجموعة المفاتيح CTRL + I. بعد ذلك، حدد المسار إلى ملف الصورة في مربع الحوار وانقر فوق الزر "استيراد". سيتم عرض لك على هذا واحد.

في شريط الأدوات، ابحث عن إصدار "Node Editor" وحدد أداة "Shape". يمكن أيضًا استدعاء هذه الأداة بالضغط على المفتاح F10.

على يمين الزاوية، تحتاج إلى التقريب، وانقر بزر الماوس الأيسر على حدود الصورة. ستظهر عقدة جديدة في الصورة، بالإضافة إلى العقد ذات الزوايا الأربع. بعد ذلك، حدد خيار Convert Line To Curve في لوحة Node Editor. ستظهر العلامات المستديرة على يسار العقدة التي تم إنشاؤها حديثًا.

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

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

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

ملحوظة

لاحظ أن استيراد صورة إلى مستند Corel Draw لا يغير ملف الصورة الأصلي، لذا يمكنك استخدامه في شكله الأصلي إذا لم تكن راضيًا عن نتيجة الزاوية المستديرة.

نصائح مفيدة

باستخدام وظيفة PowerClip، يمكنك وضع الصور في مجموعة متنوعة من الإطارات ذات الأشكال الأكثر غرابة.

مصادر:

• الدليل الرسمي لبرنامج Corel Draw، M. Matthews, K. Matthews, 1997
• كيفية تنعيم الزوايا الحادة؟

سوف تحتاج

• - حاسوب
• - برنامج أدوبي فوتوشوب
• - صورة

تعليمات

انقر بزر الماوس الأيمن على طبقة الخلفية، وحدد Duplicate Layer ثم انقر فوق OK (أو Ctrl+J). ثم أنشئ طبقة جديدة (Ctrl+Shift+N)، وضعها بين الخلفية ونسختها كما هو موضح في لقطة الشاشة (يمكنك ملؤها ببعض الألوان، على سبيل المثال الأبيض). قم بتعطيل الطبقة المقفلة (انقر على "العين" على اليسار) أو احذفها.

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

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

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

فيديو حول الموضوع

ملحوظة

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

بالنسبة للخلفية (الطبقة 2)، اختر لونًا أقرب إلى اللون الموجود على الصفحة التي تضع فيها الصورة. ثم احفظ الملف بصيغة jpg.