Border ها در CSS

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


صفات 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 را تنظیم میکند
منتشر شده در ۱۸ تیر ۱۳۹۶ حمید رضا ملکی ۱۴۵۳ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید