در آموزش css جلسه قبل  تعدادی از properties ها را مورد بررسی قرار دادیم و اکنون ادامه انها را مورد بررسی قرار می دهیم در این جلسه در مورد border در CSS و نحوه ساخت اشکال هندسی در 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;

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

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

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

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

1- دایره : 

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

#circle{
     width:140px;
     height:140px;
     background:red;
     -moz-border-radius:70px;
    -webkit-border-radius:70px
     border-radius:70px
}

2- بیضی : 

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

#oval{
     width:200px;
     height:100px;
     bacground:purpule;
    -moz-border-radius:100px/50px;
    -webkit-border-radius:100px/50px;
     border-radius:100px/50px;
}

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

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

#up-triangle{
        width:0;
        height:0;
        border-bottom:12px solid green;
        border-lift:60px solid transparent;
        border-right:60px solid transparent;
}

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

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

#down-triangle{
          wedth: 0;
          hight: 0;
          border-top 80px solid pink;
          border-lift:60px solid transparent;
          border-right:60px solid transparent;
}

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

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

#trapezium{
        width:0;
        height:80;
        border-bottom:80px solid blue;
        border-left:40px solid transparent;
        border-right:40px solid transparent;
}

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

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

#pcman{
     width:0;
     height:0;
     border-right:60px solid transparent;
     border-top:60px solid yellow;
     border-bottom:60px solid yellow;
     border-left:60px solid yellow;
     border-top-left-radius:60px;
     border-bottom-left-radius:60px;
     border-bottom-right-radius:60px
}

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