تصميم الإطارات مع لغة css

طبعا النتيجة معروفة لن يحدث شيء كما في الصورة :

تصميم الإطارات مع لغة css MqK61122

و كانت النتيجة :

تصميم الإطارات مع لغة css Ads61230

و الآن لنجرب تكبير الإطار عن طريق استخدام border-width كما في الصورة :

تصميم الإطارات مع لغة css Z0H61280

النتيجة :

تصميم الإطارات مع لغة css 2h861342

و الآن لنجرب تغيير لون الإطار عن طريق استخدام border-color كما في الصورة :

تصميم الإطارات مع لغة css A0u61379

ضع أي لون تريد أنا اخترت red

النتيجة :

تصميم الإطارات مع لغة css EIN61454

الآن نريد تحديد ستايل لكل جهة في هذا الإطار

كيف ؟؟؟

سوف نقوم بكتابة الخاصية border-???-style

حيث سوف نضع بدل ؟؟؟ الجهة التي نريد

top=أعلى

bottom=أسفل

right=يمين

left=يسار

أنا قمت بمسح كل ما بداخل style و قمت بتحديد ستايل لكل جهة في الإطار

و جعلت عرض الإطار 7 بيكسل

كما في الصورة :

تصميم الإطارات مع لغة css 3nf61492

و النتيجة في المتصفح :

تصميم الإطارات مع لغة css 5bZ61738

و الآن سوف أحدد لون لكل جهة في الإطار

حيث قمت باستخدام نفس الخاصية التي تحدد ستايل لكل جهة لكن بدل كلمة style وضعت color

لتصبح border-???-color

التعديل كما في الصورة :

تصميم الإطارات مع لغة css U2Y61779

و النتيجة في المتصفح :

تصميم الإطارات مع لغة css VWH61902

انتهى

تصميم الإطارات مع لغة css

تصميم الإطارات مع لغة css :: تعاليق

تصميم الإطارات مع لغة css