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

النشرة البريدية @

خصائص التحكم في الإطارات border

دروس، شرح، طريقة، بلوجر

تحتوي هذه المقالة على ما يلي

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

خاصية سماكة الإطار border-width

سماكة الإطار تحدد من خلال الخاصية border-width والذي يمكن تحديد قيمته من خلال الكلمات thin وmedium  و thick، أو من خلال قيمة رقمية تحدد سمكه بالبكسل
border-width: thick;
border-width: 1px;

خاصية ألوان الإطار border-color 

الخاصية border-color تحدد لون الإطار، قيمة هذه الخاصية هي قيم الألوان العادية مثل "#123456"و"rgb(123,123,123)"  أو أسماء الألوان مثل "yellow".
border-color: gold;
border-color: #123456;

خاصية تصميم الإطار border-style

هناك أنواع مختلفة من الإطارات يمكنك أن تختار منها، في المثال التوضيحي أدناه هناك 8 أنواع من الإطارات كما يعرضها إكسبلورر 5.5.
القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار.
border-style: dotted;
خاصية تصميم الإطار border-style
القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار.

جمع كل الخصائص border

خصائص الجداول المختلفة:
border-width: 1px;
border-style: solid;
border-color: #FF0000;
يمكن أن تجمع في خاصية واحدة:
border: 1px solid #FF0000;

خصائص أخرى للإطارات

خصائص الإطار من أحد الجوانب فقط

border-left: 5px solid #000080;
border-right: 5px solid #000080;
border-bottom: 3px #5D7D91 solid;
border-top: 3px #5D7D91 solid;

خاصية تدوير زاوية الإطار

border-radius: 3px 3px;

ليست هناك تعليقات :

أضف تعليق

free tracking