• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  
• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  
• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  
• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  
• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

و

و

، النتيجة قد لا تكون جميلة لكن المثال يوضح الإمكانيات المتعددة: و


h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}









• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  


يمكنك أيضاً تحديد خاصية تتعلق بجهة واحدة من الإطار، فتستخدم top
للإطار العلوي، وbottom للإطار السفلي، وleft للأيسر، وright للأيمن، وهذا
مثال يوضح كيفية فعل ذل:


h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}









• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  


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


كما هو الحال مع خصائص مختلفة، يمكن أن تجمع بين خصائص الجداول المختلفة في خاصية واحدة، ألقي نظرة على هذا المثال:


p {
border-width: 1px;
border-style: solid;
border-color: blue;
}





يمكن اختصارها هكذا:


p {
border: 1px solid blue;
}





انتظرووووووو المزيد من شروحات الدروس


مع تحيات
Abu Ali Elassasy