خصوصیت border-style
مثال (خصوصیت border-style)
تنظیم style چهار لبه عنصر <p>:
p
{
border-style:solid;
}
خودتان امتحان کنید » {
border-style:solid;
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
تعریف و کاربرد
با استفاده از خاصیت مختصر border-style، می توانید style چهار لبه یک عنصر را مشخص نمایید. این خصوصیت از یک تا چهار مقدار می تواند داشته باشد.
مثال:
- border-style:dotted solid double dashed;
- dotted لبه بالا
- solid لبه راست
- double لبه پایین
- dashed لبه چپ
- border-style:dotted solid double;
- dotted لبه بالا
- solid لبه راست و چپ
- double لبه پایین
- border-style:dotted solid;
- dotted لبه بالا و پایین
- solid لبه راست و چپ
- border-style:dotted;
- dotted تمام چهار لبه
| مقدار پیشفرض | مشخص نشده |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.borderStyle="dotted double" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت border-style را پشتیبانی می کنند.
توجه: هیچ کدام از نسخه های Internet Explorer (بانضمام IE8)، مقدار "inherit" و "hidden" را پشتیبانی نمی کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| none | border مشخص نمی شود. | نمایش دادن » |
| hidden | بجز عنصر table که در resolutionهای مختلف تضاد دارد، شبیه "none" است. | نمایش دادن » |
| dotted | لبه ها به صورت نقطه نقطه ای نمایش داده می شود. | نمایش دادن » |
| dashed | لبه ها به صورت خط تیره نمایش داده می شود. | نمایش دادن » |
| solid | لبه ها به صورت خالص و یکپارچه نمایش داده می شود. | نمایش دادن » |
| double | دو لبه نمایش داده می شود. | نمایش دادن » |
| groove | یک لبه سه بعدی گود دار (groove) نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. | نمایش دادن » |
| ridge | یک لبه سه بعدی برجسته (ridge) نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. | نمایش دادن » |
| inset | یک لبه سه بعدی inset نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. | نمایش دادن » |
| outset | یک لبه سه بعدی outset نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. | نمایش دادن » |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
تنظیم چهار لبه مختلف
چگونه برای چهار لبه یک عنصر borderهای مختلف تنظیم نماییم.
بیاموزهای مرتبط
CSS Border (بیاموز CSS)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 11891
