border-style

نکته مهم :

تا زمانی که این ویژگی را مقدار ندهید هیچکدام از ویژگیهای دیگر border را مشاهده نخواهید نمود

این ویزگی می تواند مقادیر زیر را داشته باشد :

none :

یعنی هیچ border ای در اطراف موضوع قرار نداشته باشد

border-style:none;

 

مثال

this is a test

dotted :

یعنی حاشیه ای بصورت نقطه چین در اطراف موضوعات قرار گیرد

border-style:dotted;

مثال

this is a test&lt

 dashed :

یعنی حاشیه ای بصورت خط چین در اطراف موضوعات قرار گیرد

border-style:dashed;

this is a test

 solid :

یعنی خطی یک دست در اطراف موضوعات قرار گیرد

border-style:solid;

this is a test

 double:

یعنی خط دو تایی در اطراف موضوعات قرار گیرد

border-style:double;

this is a test

 groove:

خطی سه بعدی و شیار مانند در اطراف موضوع قرار می گیرد و وابسته به رنگ border است

مثال

this is a test

 ridge :

حاشیه شیار مانند در اطراف موضوع قرار می دهد وابسته به رنگ border است

مثال

this is a test

  inset:

حاشیه داخلی یعنی بالا و سمت چپ را بصورت سه بعدی تنظیم می کند وابسته به رنگ border است

مثال

this is a test

outset :

حاشیه خارجی  یعنی پائین  و سمت راست را بصورت سه بعدی تنظیم می کند وابسته به رنگ border است

مثال

this is a test

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

 
border-width

برای تعیین ضخامت خط حاشیه یا border بکار می رود

و می تواند یکی از مقادیر زیر را داشته باشد

thin : ضخامت نازک

thick : ضخیم

medium : ضخامت متوسط

عدد دلخواه : هر ضخامت دلخواه دیگری که عددی بر حسب پیکسل یا px است

نکته مهم :

برای دیدن تاثیر هر کدام از ویژگیهای border حتما باید border-style را مقدار دهید

مثال :

در مثال زیر دو کلاس one , two برای تگ p تعریف شده است

 

p.one
}
border-style:solid;
border-width:5px;
{
p.two
}
border-style:solid;
border-width:medium;
{
 هر تگ p که از کلاس one استفاده نماید دور متن ان خطی به ضخامت 5 نقطه و سبک یکپارچه قرار می گیرد
  هر تگ p که از کلاس one استفاده نماید دور متن ان خطی به ضخامت متوسط و سبک یکپارچه قرار می گیرد
 مشاهده و اجرای برنامه کامل
 
 
border-color

برای تعیین رنگ border یا حاشیه بکار می رود

اگر قبلا border-style را مقدار نداده باشید نمی توانید تاثیر این ویزگی را ببینید

به روش های زیر می توانید رنگ border را شمخص نمائید:

نام :

نام رنگ را بکار ببرید مثل "red"

تابع rgb:

از تابع rgb برای بیان میزان ترکیب سه رنگ قرمز سبز و ابی استفاده نمائید

مثل

"rgb(255,0,0)"

 شماره هگزادسیمال رنگ :

مثل

"#ff0000"

 رنگ شفاف :

"transparent"

مثال :

در مثالهای زیر دو کلاس one , two برای تگ های p تعریف شده

 

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

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

 
تنظیم حاشیه چهار طرف بطور جداگانه

 

 

 

شما می توانید حاشیه یا bordr هر سمت را جداگانه تنظیم نمائید

 

به این صورت که به جای کلمه border در ویژگیهای بالا که به هر چهار حاشیه اشاره دارد

از کلمات زیر استفاده نمائید

border-top

border-right

border-bottom

border-left

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

 

border-top-color

border-right-color

border-bottom-color

border-left-color

border-top-style

border-right-style

border-bottom-style

border-left-style

border-top-width

border-right-width

border-bottom-width

border-left-width

 توسط یک بار نوشتن border-style نیز می توانید هر حاشیه را تنظیم نمائید

مثال 1:

border-style:dotted solid double dashed;

به ترتیب از چپ به راست:

اولین مقدار به حاشیه بالا اشاره دارد . حاشیه بالا را نقطه چین می کند

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

سومین مقدار به حاشیه سمت پائین اشاره دارد . حاشیه سمت پائین را doubleمی کند

چهارمین مقدار به حاشیه سمت چپ اشاره دارد . حاشیه سمت چپ را dashedمی کند

مثال 2:

border-style:dotted solid double;

به ترتیب از چپ به راست:

اولین مقدار به حاشیه بالا اشاره دارد . حاشیه بالا را نقطه چین می کند

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

سومین مقدار به حاشیه سمت پائین اشاره دارد . حاشیه سمت پائین را doubleمی کند

 

مثال 3:

border-style:dotted solid ;

به ترتیب از چپ به راست:

اولین مقدار به حاشیه بالا اشاره دارد . حاشیه بالا را نقطه چین می کند

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

مثال 4:

border-style:dotted;

تمام چهار حاشیه را dotted می کند

شما می توانید مشابه مثالهای یک تا چهار را برای border-color , border-width نیز انجام دهید

 
border

شما می توانید به جای استفاده از سه ویژگی border-width , border-color, border-style از ویژگی border برای مقدار دهی به این سه ویژگی استفاده نمائید

مثال :

border:5px solid red;
این دستور یعنی :
ضخامت border برابر 5 پیکسل
نوع border برابر solid
رنگ borderبرابر قرمز