الخاصية border-top-left-radius
الخاصية border-top-left-radius في CSS تضبط تدوير الركن العلوي الأيسر من العنصر.
/* الركن سيكون دائريًا */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;
/* نسب مئوية */
border-top-left-radius: 20%; /* الركن سيكون دائريًا إن كان العنصر مربعًا */
border-top-left-radius: 20% 20%; /* كما في القاعدة السابقة، أي 20% من العرض و 20% من الطول */
border-top-left-radius: 20% 10%; /* نسبة 20% من العرض و 10% من الطول */
/* الركن سيكون على شكل قطع ناقص */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;
/* القيم العامة */
border-top-left-radius: inherit;
يمكن أن يكون الركن دائري الشكل، أو يمكن أن يكون على شكل قطع ناقص (ellipse) وذلك اعتمادًا على القيمة المُسنَدة إلى هذه الخاصية، وإذا كانت القيمة تساوي 0 فلن يكون الركن مدورًا.
سيتم اقتصاص الخلفية (سواءً كانت صورةً أو لونًا) عند الإطار (حتى لو كان مدورًا)، لكن مكان الاقتصاص المُحدَّد سيُعرَّف وفق قيمة الخاصية background-clip.
ملاحظة: إن لم تكن قيمة هذه الخاصية مضبوطةً باستخدام الخاصية المختصرة border-radius التي حُدِّدت بعد استخدام الخاصية border-top-left-radius، فسيُعاد ضبط هذه الخاصية إلى قيمتها الابتدائية بسبب استخدام الخاصية المختصرة.
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| النسب المئوية | نسبة من البُعد الموافق للقيمة من إطار العنصر. |
| القيمة المحسوبة | قيمتان للطول <length>، أو نسبتان مئويتان <percentage>.
|
أمثلة
| مثال حي | الشيفرة |
|---|---|
|
|
سيُستخدَم قوسٌ من دائرة (نصف قطرها 40 بكسل) كركن للعنصر:div {
border-top-left-radius: 40px 40px;
}
|
|
|
سيُستخدَم قوسٌ من قطع ناقص (نصف قطره الرئيسي [الأفقي] 40 بكسل والثانوي [الرأسي] 20 بكسل) كركن للعنصر:div {
border-top-left-radius: 40px 20px;
}
|
|
|
استخدام نسبة مئوية مع عنصر مربع الشكل، مما يؤدي إلى استخدام قوس من دائرة كركن له:div {
border-top-left-radius: 40%;
}
|
|
|
استخدام نسبة مئوية مع عنصر ليس مربع الشكل، مما يؤدي إلى استخدام قوس من قطع ناقص كركن له:div {
border-top-left-radius: 40%;
}
|
|
|
لاحظ كيف سيتم اقتصاص لون الخلفية عند الإطار:div {
border-top-left-radius:40%;
border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box;
}
|
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 5 | 4 | 9 | 11.5 | 5 |
البنية العامة
إذا حددنا قيمةً واحدة:
- هذه القيمة تكون إما طولًا
<length>أو نسبةً مئويةً<percentage>التي تُشير إلى نصف قطر الدائرة المستخدمة لتدوير ركن الإطار.
إذا حددنا قيمتين:
- أوّل قيمة تكون إما طولًا
<length>أو نسبةً مئويةً<percentage>التي تُشير إلى نصف القطر الرئيسي (الأفقي) للقطع الناقص المستخدم لتدوير ركن الإطار. - القيمة الثانية تكون إما طولًا
<length>أو نسبةً مئويةً<percentage>التي تُشير إلى نصف القطر الثانوي (الرأسي) للقطع الناقص المستخدم لتدوير ركن الإطار.
القيمة <length> أو <percentage>
تحديد طول نصف قطر الدائرة أو أنصاف القطرين الرئيسي والثانوي في القطع الناقص، ويمكن استخدام الأطوال المطلقة بما يسمح به نوع البيانات <length>.
لاحظ أنَّ النسب المئوية للقطر الرئيسي (الأفقي) تكون نسبةً إلى عرض صندوق العنصر، والنسب المئوية للقطر الثانوي (الرأسي) تكون نسبةً إلى ارتفاع صندوق العنصر. ولا يجوز استخدام القيم السالبة.
البنية الرسمية
border-top-left-radius: <length-percentage>{1,2};
حيث:
<length-percentage> = <length> | <percentage>