جلسه هفتم-مرز(border)

خواص مرز(border) در css :

خواص مرز (border) در css به شما اجازه تعیین استایل و عرض و رنگ border را می دهد.

border1

استایلهای مرز(border) :

خاصیت border-style مشخص می نماید که چه نوع border نمایش داده شود

مقادیر زیر مجاز هستند:

  • Dotted تعریف border به صورت نقطه چین
  • Dashed تعریف border به صورت خط فاصله
  • Solid تعریف border به صورت خط ممتد
  • Double تعریف border به صورت دوخطه
  • Groove تعریف border به صورت سه بعدی از داخل
  • Ridge تعریف border  به صورت سه بعدی از خارج
  • Inset تعریف border به صورت سه بعدی از داخل
  • Outset تعریف border  به صورت سه بعدی از خارج
  • None بدون border
  • Hidden پنهان کردن border

خاصیت border-style  میتواند از یک مقدارتا ۴ مقدار را داشته باشد( border بالا، border راست ،border  پایین ، border چپ)

نتیجه:

border2

 

عرض border :

عرض چهار border  را مشخص می نماید.

عرض border  می تواند یک اندازه خاص بر حسب واحدهای(px، pt, cm, em) یا شامل یکی از مقادیر thin, medium, یا  thickباشد.

خاصیت border-width  میتواند از یک مقدارتا ۴ مقدار را داشته باشد( border بالا، border راست ،border  پایین ، border چپ)

 اجرای مثال

رنگ border :

برای تعیین رنگ border  از خصیصه border-color استفاده می شود.

رنگ می تواند به شکل های زیر تعریف شود:

۱-نام رنگ مانند red”

۲-مقدار هگزادسیمال مانند “#ff0000”

۳-مقدار RGB مانند “rgb(255,0,0)”

۴-شفاف (transparent)

خاصیت border-color  میتواند از یک مقدارتا ۴ مقدار را داشته باشد( border بالا، border راست ،border  پایین ، border چپ)

 اجرای مثال

Border – Individual Sides :

در مثال های بالا مشاهده کردید که این امکان وجود دارد که برای هر طرف border  متفاوتی تعریف نمود.

در css  خواصی برای تعیین هر یک از border های (بالا، راست، پایین، و سمت چپ) وجود دارد.

border3

 اجرای مثال

نتیجه مثال زیر همانند مثال بالا می ماند:

 اجرای مثال

اگر خصیصه border-style چهار مقدار داشته باشد:

border-style: dotted solid double dashed;

  • Border بالا به صورت dotted می باشد
  • Border راست به صورت solid  می باشد
  • Border پایین به صورت double می باشد
  • Border چپ به صورت dashed می باشد

اگر خصیصه border-style سه مقدار داشته باشد:

border-style: dotted solid double;

  • Border بالا به صورت dotted می باشد
  • Border راست و چپ به صورت  solid  می باشد.
  • Border پایین به صورت double می باشد

 

اگر خصیصه border-style دو مقدار داشته باشد:

border-style: dotted solid;

border بالا و پایین به صورت dotted  می باشد.

Border چپ و راست به صورت solid  می باشد.

 

اگر خصیصه border-style یک مقدار داشته باشد:

border-style: dotted;

border بالا،پایین ، چپ و راست به صورت dotted نمایش داده می شوند.

 

نکته:در مثال بالا از خصیصه border-style  استفاده کردیم تمام موارد ذکر شده برای خصیصه های border-widthو border-color نیز یکسان است.

مختصر نویسی خصیصه border :

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

این امکان وجود دارد که تمامی خصیصه ها را در یک خصیصه تعریف نمود

جهت مختصر نویسی کافیست از خصیصه border استفاده نمایید که شامل خصیصه های زیر است:

  • border-width
  • border-style (ضروری)
  • border-color

نتیجه:

b4

شما همچنین می توانید تمام خواص مرز را برای فقط یک طرف تعریف نمایید:

Left Border

p {
border-left: 6px solid red;
background-color: lightgrey;
}

نتیجه:

b5

Bottom Border

p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

نتیجه:

b6

گردکردن مرز(border):

برای اضافه کردن حاشیه گرد به یک عنصر از خصوصیت border-radius استفاده می نماییم:

b7

 اجرای مثال

نکته:خاصیت  border-radius در IE8 و نسخه های قبلی پشتیبانی نمی شود.




پاسخ دهید

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

*

code