سبد (0)

خاصیت border در CSS

خاصیت Border در CSS

Wiki

خواص مربوط به لبه ها در CSS

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

خاصیت border-style

Wiki

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

نکته: هیچکدام از خواص مربوط به Border نمایش داده نمی شود مگر اینکه خاصیت border-style تنظیم شده باشد.

مقادیر خاصیت border-style:

none: هیچ لبه ای نمایش داده نمی شود

dotted: لبه ها به صورت نقطه نقطه ای نمایش داده می شود

dashed: لبه ها به صورت خط تیره نمایش داده می شود

solid: لبه ها به صورت خالص و یکپارچه نمایش داده می شود

double: دو لبه نمایش داده می شود

groove: یک لبه سه بعدی گود دار نمایش داده می شود

ridge: یک لبه سه بعدی برجسته نمایش داده می شود

inset: یک لبه سه بعدی inset نمایش داده می شود

outset: یک لبه سه بعدی outset نمایش داده می شود

خودتان امتحان کنید: تنظیم چگونگی نمایش لبه ها


خاصیت border-width

Wiki

این خاصیت برای تنظیم کردن عرض یا ضخامت لبه ها استفاده می شود.

مقدار border-width به پیکسل تنظیم می شود، البته با یکی از سه مقدار از پیش تعریف شده thin و medium یا thick نیز می تواند تنظیم شود.

نکته:اگر خاصیت border-style تنظیم نشده باشد خاصیت border-width کار نخواهد کرد.

مثال (خاصیت border در CSS)

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
خودتان امتحان کنید »

 خاصیت border-color

Wiki

این خاصیت برای تنظیم رنگ لبه ها استفاده می شود. مقدار این خاصیت را می توان به یکی از روش های زیر تنظیم کرد:

  • name: نام رنگ باید مشخص شود مانند "red"
  • RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

این خاصیت همچنین با مقدار "transparent" نیز می تواند تنظیم شود.(لبه به رنگ Background خواهد بود)

نکته:اگر خاصیت border-style تنظیم نشده باشد خاصیت border-color کار نخواهد کرد.

مثال (خاصیت border در CSS)

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
خودتان امتحان کنید »

 تنظیم لبه ها، به صورت جداگانه

Wiki

در CSS این امکان وجود دارد که برای اضلاع مختلف، لبه های مختلف تعریف کرد.

مثال (خاصیت border در CSS)

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
خودتان امتحان کنید »

مثال بالا را می توان با یک خاصیت نیز تنظیم کرد:

مثال (خاصیت border در CSS)

border-style:dotted solid;
خودتان امتحان کنید »

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

  1. border-style:dotted solid double dashed;
    • dotted لبه بالا
    • solid لبه راست
    • double لبه پایین
    • dashed لبه چپ
  2. border-style:dotted solid double;
    • dotted لبه بالا
    • solid لبه راست و چپ
    • double لبه پایین
  3. border-style:dotted solid;
    • dotted لبه بالا و پایین
    • solid لبه راست و چپ
  4. border-style:dotted;
    • dotted تمام چهار لبه

آنچه در مورد خاصیت border-style در بالا گفته شد در مورد خاصیت های border-width و border-color نیز استفاده می شود.


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

Wiki

همان طور که در مثال بالا دیدید، برای تنظیم لبه ها با خواص زیادی سروکار داریم.

این امکان وجود دارد که تمام خواص بالا را به یک خاصیت تبدیل کنیم تا کدمان کوتاه تر شود، این خاصیت برای تنظیم لبه ها، خاصیت "border" نام دارد:

مثال (خاصیت border در CSS)

border:5px solid red;
خودتان امتحان کنید »

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

  1. border-width
  2. border-style
  3. border-color

اگر یکی از مقادیر بالا قید نشود مشکلی پیش نخواهد آمد البته همان طور که قبلاً گفته شد خاصیت border-style مورد نیاز است، تنها چیزی که باید رعایت شود ترتیب مقادیر است.


تمام خواص مربوط به لبه در CSS

Wiki

خاصیتتوضیحات
border

کلیه خصوصیات لبه های یک عنصر را در یک مرحله تنظیم می کند

border-bottom

کلیه خصوصیات لبه پایینی یک عنصر را در یک مرحله تنظیم می کند

border-bottom-color

رنگ لبه پایینی یک عنصر را تنظیم می کند

border-bottom-style

style لبه پایینی یک عنصر را تنظیم می کند

border-bottom-width

عرض لبه پایینی یک عنصر را تنظیم می کند

border-color

رنگ لبه های چهار سمت یک عنصر را تنظیم می کند

border-left

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

border-left-color

رنگ لبه سمت چپ یک عنصر را تنظیم می کند

border-left-style

style لبه سمت چپ یک عنصر را تنظیم می کند

border-left-width

عرض لبه سمت چپ یک عنصر را تنظیم می کند

border-right

کلیه خصوصیات لبه سمت راست یک عنصر را در یک مرحله تنظیم می کند

border-right-color

رنگ لبه سمت راست یک عنصر را تنظیم می کند

border-right-style

style لبه سمت راست یک عنصر را تنظیم می کند

border-right-width

عرض لبه سمت راست یک عنصر را تنظیم می کند

border-style

style لبه های چهار سمت یک عنصر را تنظیم می کند

border-top

کلیه خصوصیات لبه بالایی یک عنصر را در یک مرحله تنظیم می کند

border-top-color

رنگ لبه بالایی یک عنصر را تنظیم می کند

border-top-style

style لبه بالایی یک عنصر را تنظیم می کند

border-top-width

عرض لبه بالایی یک عنصر را تنظیم می کند

border-width

عرض لبه های چهار سمت یک عنصر را تنظیم می کند

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه