تاریخ انتشار:۱۲:۳۹ ۱۳۹۹/۲/۲۰

صفات Border در CSS

صفات border در زبان CSS به شما اجازه خواهند داد که استایل، پهنا و رنگ یک border از یک عنصر را تعیین کنید.

در عناصر مشخص شده در پایین، هرکدام از عناصر به روشی متفاوت از صفت border استفاده کرده اند :

عنصری که هر چهار طرف آن دارای border است.

عنصری که دارای یک border پایین به رنگ قرمز است.

عنصری که دارای border دایره ای (گرد) در اطراف خود است.

عنصری که دارای یک border سمت راست به رنگ آبی است.

---

صفت border-style

صفت border-style نوع border را برای نمایش مشخص میکند. مقادیر زیر برای این صفت استفاده میشود :

• dotted - یک border با استایل نقطه ای
• dashed - یک border با استایل خطوط فاصله
• solid - یک border با استایل خط مستقیم
• double - یک border با استایل دو خط مستقیم
• groove - یک border سه بعدی با استایل grooved. نوع اثر آن بستگی به مقدار صفت border-color دارد.
• ridge - یک border سه بعدی با استایل ridge. نوع اثر آن بستگی به مقدار صفت border-color دارد.
• inset - یک border سه بعدی با استایل inset. نوع اثر آن بستگی به مقدار صفت border-color دارد.
• outset - یک border سه بعدی با استایل outset. نوع اثر آن بستگی به مقدار صفت border-color دارد.
• none - بدون border
• hidden - یک border پنهان

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

 p.dotted  { border-style : dotted ; }
 p.dashed  { border-style : dashed ; }
 p.solid  { border-style : solid ; }
 p.double  { border-style : double ; }
 p.groove  { border-style : groove ; }
 p.ridge  { border-style : ridge ; }
 p.inset  { border-style : inset ; }
 p.outset  { border-style : outset ; }
 p.none  { border-style : none ; }
 p.hidden  { border-style : hidden ; }
 p.mix  { border-style : dotted dashed solid double ; }

 

و نتیجه به شکل زیر خواهد بود :

 

یک border با استایل نقطه ای

یک border با استایل خطوط فاصله

یک border با استایل خط مستقیم

یک border با استایل دو خط مستقیم

یک border سه بعدی با استایل grooved

یک border سه بعدی با استایل ridge

یک border سه بعدی با استایل inset

یک border سه بعدی با استایل outset

بدون border

یک border پنهان

یک border ترکیبی

بدون مقداردهی صفت border-style هیچکدام از صفات border ایی که در ادامه فصل توضیح داده خواهد شد، تاثیری نخواهند داشت.

---

صفت Border-width

صفت border-width پهنای هر چهار border (بالا، راست، پایین، چپ) را مشخص میکند.

پهنا میتواند به عنوان یک اندازه ی مشخص تنظیم شود و یا به وسیله ی یکی ازسه مقدار پیشفرض تعیین شده مقدار دهی شود : thin , medium , thick

عنصری با border ایی به پهنای 5 پیکسل

در نمونه مثال زیر نحوه ی مقداردهی صفت border-width با مقادیر مختلف نشان داده شده است :

 }  p.one  
 ; border-style : solid 
 ; border-width : 5px 
 {
 }  p.two  
 ; border-style : solid 
 ; border-width : medium 
 {
 }  p.three  
 ; border-style : solid 
 ; border-width : 2px 10px 4px 20px 
 {

---

صفت Border-color

صفت border-color برای تنظیم رنگ هر چهار border (بالا، راست، پایین، چپ) استفاده میشود.

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

• یک نام معتبر برای یک رنگ - مانند "red"
• یک مقدار هگزادسیمال - مانند "ff0000#"
• یک مقدار RGB - مانند "(rgb(255,0,0"

اگر مقدار border-color تنظیم نشود از رنگ عنصر به عنوان رنگ پیشفرض استفاده میکند.

یک border به رنگ قرمز

در نمونه مثال زیر نحوه ی مقداردهی border-color با یک یا چند مقدار مشخص شده است :

 }  p.one  
 ;border-style : solid 
 ;border-color : red 
 {
 }  p.two  
 ;border-style : solid 
 ;border-color : green 
 {
 }  p.three  
 ;border-style : solid 
 ;border-color : red green blue yellow 
 {

---

Border - تعیین نوع border برای هر سمت به طور جداگانه

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

عنصری با border های مختلف

در عنصر مشخص شده در بالا برای border بالا و پایین از نوع dotted و برای border چپ و راست از نوع solid استفاده شده است. برای رسیدن به نتیجه ی بالا از نمونه کد آورده شده در مثال زیر استفاده میکنیم :

 }  p  
 ; border-top-style : dotted 
 ; border-right-style : solid 
 ; border-bottom-style : dotted 
 ; border-left-style : solid 
 {

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

 }  p  
 ;border-style : dotted solid 
 {

اما نمونه کدهای بالا چطور کار میکنند :

اگر صفت 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 داریم. برای کوتاه نویسی در کد این امکان وجود دارد که تمام صفات ذکر شده را در یک صفت جمع کنیم. این صفات عبارت اند از :

• border-width
• border-style
• border-color 

که میتوان به شکل زیر آنها را در یک خط نوشت :

 }  p  
 ;border : 5px solid red 
 {

 نتیجه عبارت است از :

مقداری متن

در مثال بالا مقادیر استفاده شده برای هر چهار border اعمال میشوند اما میتوان این مقادیر را بر روی یک سمت هم به کار برد :

border سمت چپ :

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

نتیجه :

 

border پایینی :

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

نتیجه :

مقداری متن

---

صفت border-radius

از صفت border-radius برای ایجاد border های گرد (دارای گوشه های گرد) استفاده میشود :

یک border در حالت عادی

یک border گرد

یک border گردتر

گردترین border

برای رسیدن به نتایج بالا از نمونه کد زیر استفاده میکنیم :

 }  p  
 ;border : 2px solid red 
 ;border-radius : 5px 
 {

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

---

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

صفت	توضیح
border	تمام صفات border را در یک تعریف تنظیم میکند
border-bottom	تمام صفات border پایینی را در یک تعریف تنظیم میکند
border-bottom-color	رنگ صفت border پایینی را تنظیم میکند
border-bottom-style	نوع استایل صفت border پایینی را تنظیم میکند
border-bottom-width	پهنای صفت border پایینی را تنظیم میکند
border-color	رنگ صفت border را برای هر چهار سمت تنظیم میکند
border-left	تمام صفات border سمت چپ را در یک تعریف تنظیم میکند
border-left-color	رنگ صفت border سمت چپ را تنظیم میکند
border-left-style	نوع استایل صفت border سمت چپ را تنظیم میکند
border-left-width	پهنای صفت border سمت چپ را تنظیم میکند
border-radius	برای هر چهار سمت مقدار گردی گوشه ها را تنظیم میکند
border-right	تمام صفات border سمت راست را در یک تعریف تنظیم میکند
border-right-color	رنگ صفت border سمت راست را تنظیم میکند
border-right-style	نوع استایل صفت border سمت راست را تنظیم میکند
border-right-width	پهنای صفت border سمت راست را تنظیم میکند
border-style	نوع استایل صفت border را برای هر چهار سمت تنظیم میکند
border-top	تمام صفات border بالایی را در یک تعریف تنظیم میکند
border-top-color	رنگ صفت border بالایی را تنظیم میکند
border-top-style	نوع استایل صفت border بالایی را تنظیم میکند
border-top-width	پهنای صفت border بالایی را تنظیم میکند
border-width	پهنای هر چهار border را تنظیم میکند

 

منبع:learnsource