CSS Border Width
-
في هذه الخاصية يتم التحكم بلون الحواف (border) الخاص ب element
تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم BorderColorوبعدها نضيف الكود التالي:
<!DOCTYPE html>
<html>
<body><p style="border-style:solid; border-color: red; border-width: 5px;"> Borders Color تطبيق </p><p style="border-style:solid; border-color: gray; border-width: 5px; "> Borders Color تطبيق </p><p style="border-style:double; border-color: green; border-width: 5px;"> Borders Color تطبيق </p></body>
</html>
شغل الصفحة ونشوف النتيجة (الصورة)
تمام في هذا المثال طبقنا امثلة على تغيير color Border الخاص ب <P> element .
وللتذكير استخدمنا Inline CSS
طيب نفهم الكود:
طبقنا الكود التالي على <p>:
border-color: والتي هي مسؤولة عن تحديد حجم الاطار
تمام طريقة الكتابة بتكون بالشكل:
Border-color:<Value>;
Value هنا يمكن ان تكون
1parameter او 2parameter او parameter3 او parameter4
تمام نشوف كيف ممكن نطبق هذا الكلام
1parameter
border-color: all;
مثال :
border-color: red;
في حال تطبيق قيمة واحدة ، فهذا يعني تطبيق هذه القيمة المدخلة اللون الأحمر على الجوانب الأربعة (top, right, bottom, left).
2parameter
border-width: top_bottom left_right;
مثال :
border-color: gray yellow;
في حال تطبيق قيمتين ، سيتم تطبيق القيمة الأولى على الجزء العلوي والسفلي. وسيتم تطبيق القيمة الثانية على الجانبين الأيسر والأيمن.
parameter3
border-width: top right_left bottom
في حال تطبيق ثلاث قيم ، سيتم تطبيق القيمة الأولى في الجزء العلوي. وسيتم تطبيق القيمة الثانية على الجانبين الأيمن والأيسر. ويتم تطبيق القيمة الثالثة على الجزء السفلي.
مثال :
border-color: gray yellow orange;
parameter4
border-width: top right bottom left;
مثال
في حال توفير أربع قيم، سيتم تطبيق القيمة الأولى على الجزء العلوي. وسيتم تطبيق القيمة الثانية على الجانب الأيمن. وسيتم تطبيق القيمة الثالثة على الجزء السفلي. وسيتم تطبيق القيمة الرابعة على الجانب الايسر.
border-color: gray yellow orange gray;
يمكن تطبيق قيم مختلفة على Border-color والتي قد تكون واحد من :
| القيمة | الوصف |
| fixed | قيمة ثابتة يتم تطبيقها باستخدام px او em امثله div { border-width: 2px; } div { border-width: 1em 1px; } div { border-width: 2px 5px 4px; } div { border-width: 4px 0 2px 3px; } |
| thin | تطبيق العرض بشكل رفيع thin ، والذي قد يكون 1 بكسل أو 2 بكسل حسب المتصفح مثال : div { border-width: thin; } |
| Medium | تطبيق العرض بشكل متوسط Medium ، والذي قد يكون 3 بكسل أو 4 بكسل حسب المتصفح مثال : div { border-width: medium; } |
| thick | تطبيق العرض بشكل سميك thick ، والذي قد يكون 5 بكسل أو 6 بكسل حسب المتصفح مثال : div { border-width: thick; } |
واكيد يمكن دمج القيم thin, medium, thick, and fixed مع بعض في خاصية CSS border-color.
راجع أيضًا خصائص الحدود ولون الحدود ونمط الحدود.
امثلة :
Div.One {
border-style: solid;
border-width: 5px; /* 5px top and bottom, Left and Right */
border-color: #FF0000; /* #FF0000 color for top and bottom, Left and Right */
}في هذا المثال ، طبقنا لون واحد #FF0000 ، والتي سوف تطبق على جميع الجوانب الأربعة لDiv.
Div.two {
border-style: solid;
border-width: 20px medium; /* 20px top and bottom, medium for left ang right */
border-color: #FF0000 black; /* #FF0000 color for top and bottom, black for Left and Right */
}في هذا المثال، طبقنا لونين. سيتم تطبيق اللون الأول #FF0000 على الجزء العلوي والسفلي من Div. سيتم تطبيق اللون الثاني black على الجانبين الأيسر والأيمن من Div.
Div.three {
border-style: solid;
border-width: 25px thin 4px ; /* 25px top, thin for right and left, 4px for bottom */
border-color: #FF0000 black yellow; /* #FF0000 color for top, black for right and left, yellow for bottom */
}
Div.four {
border-style: solid;
border-width: 25px thin 4px meduim ; /* 25px top, thin for right 4px for bottom, medium for left */
border-color: rgb(0,0,0) #FF0000 black yellow; /* rgb(0,0,0) for top, #FF0000 for right ,black for bottom ,yellow for left */
}
في هذا المثال طبقنا أربع قيم. حيث سيتم تطبيق اللون الأول rgb(0,0,0) على الجزء العلوي من Div. و,سيتم تطبيق اللون الثاني #FF0000 على الجانب الأيمن . وسيتم تطبيق اللون الثالث black على الجزء السفلي. واخيرا تطبيق اللون الرابط yellow على الجانب الأيسر.
اترك تعليقك