دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » border در CSS و نحوه ساخت اشکال هندسی در css
border در CSS و نحوه ساخت اشکال هندسی در css

border در CSS و نحوه ساخت اشکال هندسی در css

در آموزش css جلسه قبل  تعدادی از properties ها را مورد بررسی قرار دادیم و اکنون ادامه انها را مورد بررسی قرار می دهیم در این جلسه در مورد border در CSS و نحوه ساخت اشکال هندسی در CSS را آموزش میدهم .

مبحث هشتم : border در CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تصویر زیر تمامی خاصیت های بالا را به شکل واضح بیان میکند.

border در CSS و نحوه ساخت اشکال هندسی با آن در css

border-color :

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

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

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

border در CSS و نحوه ساخت اشکال هندسی در css

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

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

تصویر زیر ، تصویر تخصصی تر می باشد که در صورت نیاز می توانید از دستورات آن استفاده کنید

border و نحوه ساخت اشکال هندسی در css

مبحث نهم : ساخت اشکال هندسی با border در CSS

در این مبحث در مورد اشکال هندسی صحبت می کنیم و خواهید اموخت که چگونه یک شکل هندسی درست کنید . چگونه اندازه آنرا تغییر داد و امثال اینها که در ادامه تمامی این موارد را مورد بحث قرار می دهیم .

در ضمن در css دستوری برای درست کردن شکل هندسی نیست اما می توانید با استفاده از دستورات زیر شکل هندسی درست نمایید.

1- دایره : 

برای درست کردن دایره می توانید از دستور زیر استفاده نمایید.

border و نحوه ساخت اشکال هندسی با آن در css

2- بیضی : 

برای درست کردن بیضی میتوانید از دستور زیر استفاده نمایید.

border و نحوه ساخت اشکال هندسی با آن در css

3- سه ضلعی (بالا) : 

برای درست کردن سه ضلعی (بالا) میتوانید از دستور زیر استفاده نمایید.

border و نحوه ساخت اشکال هندسی با آن در css

4- سه ضلعی (پایین) :

برای درست کردن سه ضلعی (پایین) میتوانید از دستور زیر استفاده نمایید.

border و نحوه ساخت اشکال هندسی با آن در css

5- چهار ضلعی غیر منظم : 

برای درست کردن چهار ضلعی غیر منظم میتوانید از دستور زیر استفاده نمایید.

border و نحوه ساخت اشکال هندسی با آن در css

6- دایره قطع شده :

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

border و نحوه ساخت اشکال هندسی با آن در css

و دیگر اشکال که شما خود میتوانید انها را به دلخواه رسم نمایید .

پیشنهاد می کنیم حتما بخوانید :

درباره : سعید پناهی

نظرات کاربران :



جواب سوال چیه ؟ *