فروردین, ۱۳۹۸ بدون نظر CSS, طراحی سایت

border در CSS

این خاصیت از جمله خاصیت های پر کاربرد می باشد که البته توسط این خاصیت میتوانید یک خط با ضخامت دلخواه برای حاشیه ها ، box ها ، تصاویر و تمامی عناصر های موجود در صفحه ایجاد نمایید .

برای مثال شما میخواهید به دور تصویرتان یک خط با ضخامت مشخص با رنگ مشخص اضافه نمایید تا تصویرتان زیبا تر دیده.

نوع استفاده از خاصیت border در CSS به شکل زیر است :

 border: border-width border-style border-color | initial| inherit;

 

border-width:

ضخامت خط را مشخص میکند که شامل مقادیر زیر می باشد:

none : خط را حذف میکند.

hidden : برابر با none است و خط را حذف میکند.

dotted: خط را به صورت نقطه چین نمایش میدهد.

dashed : خط را به صورت نقطه چین نمایش میدهد.

solid : خط را به صورت ممتد و صاف نمایش میدهد.

double : خط را به صورت دو خط موازی نمایش میدهد.

groove : خط را به صورت سه بعدی از داخل نمایش میدهد.

ridge : خط را به صورت سه بعدی از خارج نمایش میدهد.

inset: خط را به صورت سه بعدی از داخل نمایش میدهد.

outset : خط را به صورت سه بعدی از خارج نمایش میدهد.

initial : مقدار پیش فرض را قرار می دهد.

inherit : با توجه به مقدار عنصر والد مقدار، مشخص میکند،مثلآ اگر برای عنصر border-style مقدار solid مشخص شده باشد، برای عنصر فرزند هم مقدار solid مشخص می شود.

border-color :

رنگ خط ( یا border در CSS ) را مشخص میکند ، برای تعیین رنگ میتوانید از نام رنگ ها ، کدهای hex، rgb ها استفاده کنید. حتی با rgba می توانید مقدار opacity خط را کم و زیاد کنید.

نحوه استفاده از این خاصیت به صورت خلاصه نویسی و استاندارد به شکل زیر است:

border:3px solid red;
border:1px dashed #000000;
border:3px dotted rgba(0,0,0,0,1);

border Radius :

گاهی می خواهیم دور تصویر ، باکس ها و element های مان را گرد کنیم و شکلی شبیه به تصویر زیر ایجاد کنیم.

برای این کار از خاصیت border Radius استفاده می کنیم . برای این خاصیت می توانیم دور انها را به صورت منحنی گرد کنید.

نحوه استفاده از این خاصیت به شکل زیر است :

border:3px solid red;
border-radius:5px;
برچسب ها

ارسال نظر شما

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *