الفرق بين المراجعتين لصفحة: «CSS/border-bottom-left-radius»

من موسوعة حسوب
< CSS
→ التعديل السابقالتعديل اللاحق ←
مرئينص الويكي
لا ملخص تعديل
لا ملخص تعديل
سطر 161: سطر 161:


==انظر أيضًا==
==انظر أيضًا==
*الأركان المدورة <code>[[CSS/border-radius|border-radius]]</code> والخاصيات الأخرى التي تضبطها وهي: [[CSS/border-bottom-right-radius|<code></code>]]<code>[[CSS/border-radius|border-bottom-right-radius]]</code>، و [[CSS/border-bottom-right-radius|<code></code>]]<code>[[CSS/border-radius|border-top-left-radius]]</code>،                                          و [[CSS/border-bottom-right-radius|<code></code>]]<code>[[CSS/border-radius|border-top-right-radius]]</code>
*الأركان المدورة <code>[[CSS/border-radius|border-radius]]</code> والخاصيات الأخرى التي تضبطها وهي: [[CSS/border-bottom-right-radius|<code></code>]]<code>[[CSS/border-bottom-right-radius|border-bottom-right-radius]]</code>، و [[CSS/border-bottom-right-radius|<code></code>]]<code>[[CSS/border-top-left-radius|border-top-left-radius]]</code>،                                          و [[CSS/border-bottom-right-radius|<code></code>]]<code>[[CSS/border-top-right-radius|border-top-right-radius]]</code>
*صفحةالخاصية <code>[[CSS/border|border]]</code> والخاصيات الأخرى التي تضبطها وهي: <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
*صفحةالخاصية <code>[[CSS/border|border]]</code> والخاصيات الأخرى التي تضبطها وهي: <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
*صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي <code>[[CSS/border-top|border-top]]</code>، والإطاري السفلي <code>[[CSS/border-bottom|border-bottom]]</code>، والإطار اليميني <code>[[CSS/border-right|border-right]]</code>، والإطار اليساري <code>[[CSS/border-left|border-left]]</code>.
*صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي <code>[[CSS/border-top|border-top]]</code>، والإطاري السفلي <code>[[CSS/border-bottom|border-bottom]]</code>، والإطار اليميني <code>[[CSS/border-right|border-right]]</code>، والإطار اليساري <code>[[CSS/border-left|border-left]]</code>.

مراجعة 19:56، 28 يونيو 2018

الخاصية border-bottom-left-radius في CSS تضبط تدوير الركن السفلي الأيسر من العنصر.

/* الركن سيكون دائريًا */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* نسب مئوية */
border-bottom-left-radius: 20%; /* الركن سيكون دائريًا إن كان العنصر مربعًا */
border-bottom-left-radius: 20% 20%; /* كما في القاعدة السابقة، أي 20% من العرض و 20% من الطول */
border-bottom-left-radius: 20% 10%; /* نسبة 20% من العرض و 10% من الطول */

/* الركن سيكون على شكل قطع ناقص */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;

/* القيم العامة */
border-bottom-left-radius: inherit;

يمكن أن يكون الركن دائري الشكل، أو يمكن أن يكون على شكل قطع ناقص (ellipse) وذلك اعتمادًا على القيمة المُسنَدة إلى هذه الخاصية، وإذا كانت القيمة تساوي 0 فلن يكون الركن مدورًا.

سيتم اقتصاص الخلفية (سواءً كانت صورةً أو لونًا) عند الإطار (حتى لو كان مدورًا)، لكن مكان الاقتصاص المُحدَّد سيُعرَّف وفق قيمة الخاصية background-clip.

ملاحظة: إن لم تكن قيمة هذه الخاصية مضبوطةً باستخدام الخاصية المختصرة border-radius التي حُدِّدت بعد استخدام الخاصية border-bottom-left-radius، فسيُعاد ضبط هذه الخاصية إلى قيمتها الابتدائية بسبب استخدام الخاصية المختصرة.

بطاقة الخاصية

القيمة الابتدائية 0
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك نعم
النسب المئوية نسبة من البُعد الموافق للقيمة من إطار العنصر.
القيمة المحسوبة قيمتان للطول <length>، أو نسبتان مئويتان <percentage>.

أمثلة

مثال حي الشيفرة
.
 سيُستخدَم قوسٌ من دائرة (نصف قطرها 40 بكسل) كركن للعنصر:
div {
  border-bottom-left-radius: 40px 40px;
}
.
 سيُستخدَم قوسٌ من قطع ناقص (نصف قطره الرئيسي [الأفقي] 40 بكسل والثانوي [الرأسي] 20 بكسل) كركن للعنصر:
div {
  border-bottom-left-radius: 40px 20px;
}
.
 استخدام نسبة مئوية مع عنصر مربع الشكل، مما يؤدي إلى استخدام قوس من دائرة كركن له:
div {
  border-bottom-left-radius: 40%;
}
.
 استخدام نسبة مئوية مع عنصر ليس مربع الشكل، مما يؤدي إلى استخدام قوس من قطع ناقص كركن له:
div {
  border-bottom-left-radius: 40%;
}
.
 لاحظ كيف سيتم اقتصاص لون الخلفية عند الإطار:
div {
  border-bottom-left-radius: 40%;
  border-style: black 3px double;
  background-color: rgb(250, 20, 70);
  background-clip: content-box;
  height: 200px;
  width: 200px;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 5 4 9 11.5 5

البنية العامة

إذا حددنا قيمةً واحدة:

  • هذه القيمة تكون إما طولًا <length> أو نسبةً مئويةً <percentage> التي تُشير إلى نصف قطر الدائرة المستخدمة لتدوير ركن الإطار.

إذا حددنا قيمتين:

  • أوّل قيمة تكون إما طولًا <length> أو نسبةً مئويةً <percentage> التي تُشير إلى نصف القطر الرئيسي (الأفقي) للقطع الناقص المستخدم لتدوير ركن الإطار.
  • القيمة الثانية تكون إما طولًا <length> أو نسبةً مئويةً <percentage> التي تُشير إلى نصف القطر الثانوي (الرأسي) للقطع الناقص المستخدم لتدوير ركن الإطار.

<length> أو <percentage>

تحديد طول نصف قطر الدائرة أو أنصاف القطرين الرئيسي والثانوي في القطع الناقص، ويمكن استخدام الأطوال المطلقة بما يسمح به نوع البيانات <length>.

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

البنية الرسمية

border-bottom-left-radius: <length-percentage>{1,2};

حيث:

<length-percentage> = <length> | <percentage>

انظر أيضًا

مصادر ومواصفات

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/border-bottom-left-radius&oldid=11399»