خاصیت و کاربرد border همراه با مثال

کادر، یکی از مهمترین قسمتهای طراحی وب میباشد.

شما اگر نتوانید کادر مناسبی برای قالب وبتون در نظر بگیرید قطعا طراحیتون زیاد خوب از آب در نمیاد.

حتی خود این وب برای اینکه طرح های زیبای بتونیم براش در نظر بگیریم از border یا کادر استفاده کرده ایم. میخواهیم با هم ببینیم کار border در استایل نویسی چیه و چه کاری یا چه کارهایی میتونه انجام بده.

از نظر من با border میشه به جز کادر ، استفاده های دیگری نیز کرد.

مثلا میشه برای عکس ها قالب درست کرد یا در منوها به عنوان زیر خط منوها استفاده کرد و ...

border را میتونیم در چند خط کل کدهاش را که میشه ازشون استفاده کرد را نشان بدیم.

border:1px black double;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-width:100px;

تمام شد ! کل border همینه.
بقیش بستگی به خلاقیت شما داره که چگونه و به چه شکل از این ها استفاده کنید.
قاب یا کادری که کدها داخلش نوشته شده اگر به دور این کادر نگاه کنید میبینید یک رنگ مشکلی تقریبا پر رنگ کشیده شده. این کار توسط همین border انجام شده که کدش به شکل زیر میشه :

border:2px black double;

حالا شما میتونید کارهای دیگر نیز بکنید
مثلا بیاید border قسمت بالا و پایین کادر را مخفی کنید و به دو طرف یعنی چپ و راست رنگ بدید ...
در ادامه میتونید با استفاده از hover مشخص کنید در صورتی که موس بر روی این قاب یا کادر اومد border های بالا یا پایین به نمایش داده شده و رنگ آنها مثلا قرمز و آبی شوند
کل توضیحات بالا رو میتونید در پایین با کد ببینید :

.codenevis
{
border:2px green double;
border-top-style:none;
border-bottom-style:none;
border-right-color:pink;
border-left-color:yellow;
}
.codenevis:hover
{
border-top-style:dotted;
border-bottom-style:double;
border-top-color:red;
border-bottom-color:blue;
}

خلاقیت و خلاقیت و خلاقیت ...
border شاید کلا کل مفهوم و استفاده اش یک کادر ساده باشه.
اما دیدید که استفاده خیلی بهتری هم میشه ازش کرد. هنوز هم با تغییرات دیگه و استفاده از کدهای دیگه مثل jquery خیلی چیز قشنگتری بسازید.