راسخون

مرجع CSS

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-top

مثال

تنظیم style لبه ی بالایی عنصر <p>:

p 
{
border-style:solid;
border-top:thick double #ff0000;
}

تعریف و کاربرد

با استفاده از خصوصیت مختصر border-top، می توانید در یک مرحله تمام خصوصیت های لبه بالایی را تنظیم نمایید.

خصوصیت هایی که می توانید تنظیم نمایید بترتیب برابر است با:

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

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مقدار پیشفرض مشخص نشده
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderTop="3px solid blue"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-top را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات
border-top-width width لبه بالایی را مشخص می کند.
border-top-style style لبه بالایی را مشخص می کند.
border-top-color color لبه بالایی را مشخص می کند.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-top-color

مثال

تنظیم رنگ لبه ی بالایی عنصر <P>:

p 
{
border-style:solid;
border-top-color:#ff0000
}

تعریف و کاربرد

با استفاده از خصوصیت border-top-color، می توانید رنگ لبه بالایی عناصر را تنظیم نمایید.

توجه: قبل از اینکه خصوصیت border-top-color را تنظیم نماید خصوصیت border-style را مقدار دهی کنید. یک عنصر باید لبه داشته باشد تا بتوان رنگ آنرا مشخص نمود.

مقدار پیشفرض مشخص نشده
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderTopColor="blue"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-bottom-color را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 6 و نسخه های قبلی آن،، مقدار "transparent" را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
color لطفاً جهت مشاهده رنگ های قابل استفاده به لینک روبرو مراجعه نمایید: HTML Colors
transparent مشخص می کند که رنگ لبه ها باید ناپیدا باشد. (مقدار پیشفرض)
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-top-style

مثال

تنظیم style لبه سمت راست عنصر <p>:

p 
{
border-style:solid;
border-top-style:dotted;
}

تعریف و کاربرد

با استفاده از خصوصیت border-top-style، می توانید style لبه بالای یک عنصر را تنظیم نمایید.

مقدار پیشفرض مشخص نشده
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderTopStyle="dotted"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-top-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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-top-width

مثال

تنظیم width لبه بالایی عنصر <p>:

p 
{
border-style:solid;
border-top-style:dotted;
}

تعریف و کاربرد

با استفاده از خصوصیت border-top-width، می توانید عرض لبه بالایی یک عنصر را تعیین نمایید.

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

مقدار پیشفرض medium
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderTopWidth="thick"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-top-width را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
thin یک لبه نازک (thin) تعریف می کند.
medium یک لبه متوسط (medium) تعریف می کند. (مقدار پیشفرض)
thick یک لبه ضخیم (thin) تعریف می کند.
length به شما اجازه می دهد که میزان ضخامت لبه را خودتان مشخص نمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-top-width

مثال

تنظیم width لبه بالایی عنصر <p>:

p 
{
border-style:solid;
border-top-style:dotted;
}

تعریف و کاربرد

با استفاده از خصوصیت border-top-width، می توانید عرض لبه بالایی یک عنصر را تعیین نمایید.

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

مقدار پیشفرض medium
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderTopWidth="thick"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-top-width را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
thin یک لبه نازک (thin) تعریف می کند.
medium یک لبه متوسط (medium) تعریف می کند. (مقدار پیشفرض)
thick یک لبه ضخیم (thin) تعریف می کند.
length به شما اجازه می دهد که میزان ضخامت لبه را خودتان مشخص نمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-width

مثال

تنظیم width چهار لبه عنصر <p>:

p
{
border-style:solid;
border-width:15px;
}

تعریف و کاربرد

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

مثال:

  1. border-width:thin medium thick 10px;
    • thin لبه بالا
    • medium لبه راست
    • thick لبه پایین
    • 10px لبه چپ
  2. border-width:thin medium thick;
    • thin لبه بالا
    • medium لبه راست و چپ
    • thick لبه پایین
  3. border-width:thin medium;
    • thin لبه بالا و پایین
    • medium لبه راست و چپ
  4. border-width:thin;
    • thin تمام چهار لبه

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

مقدار پیشفرض medium
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderWidth="thin thick"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-width را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
thin یک لبه نازک (thin) تعریف می کند.
medium یک لبه متوسط (medium) تعریف می کند. (مقدار پیشفرض)
thick یک لبه ضخیم (thin) تعریف می کند.
length به شما اجازه می دهد که میزان ضخامت لبه را خودتان مشخص نمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت outline

مثال

تنظیم خط خارجی اطراف یک عنصر:

p 
{
outline:#00FF00 dotted thick;
}

تعریف و کاربرد

با استفاده از خصوصیت outline می توان یک خط خارجی اطراف عناصر رسم نمود، (خارج از border) تا عنصر را برجسته تر و واضح نمود.

فرم مختصر شده outline تمام خصوصیت های outline را در یک تخصیص تنظیم می کند.

خصوصیت هایی که می توانند تنظیم شوند به ترتیب عبارتند از چپ به راست: outline-color، outline-style، outline-width

اگر یکی از مقادیر بالا مقدار دهی نشود، مثلا مقدار دهی به صورت "outline:solid #ff0000" باشد، آنگاه مقدار پیش فرض به جای آن درج می شود.

مقدار پیشفرض invert none medium
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.outline="#0000FF dotted thin"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت outline را پشتیبانی می کنند.

توجه: IE8 به !DOCTYPE! نیاز دارد.

نکته ها و ترفندها

outline جزء ابعاد عنصر به حساب نمی آید، بنابراین خصوصیت های طول و عرض عنصر شامل ضخامت outline نمی شود.

مقدارهای خصوصیت

مقدار توضیحات
outline-color  رنگ outline را مشخص می کند.
outline-style استایل outline را مشخص می کند.
outline-width ضخامت outline را مشخص می کند.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت outline-color

مثال

تنظیم رنگ خط خارجی یک عنصر و نقطه چین کردن آنپک

p 
{
outline-style:dotted;
outline-color:#00ff00;
}

تعریف و کاربرد

با استفاده از خصوصیت outline می توان یک خط خارجی اطراف عناصر رسم نمود، (خارج از border) تا عنصر را برجسته تر و واضح نمود.

خصوصیت outline-color برای مشخص کردن رنگ خط خارجی به کار می رود.

توجه: همواره خصوصیت outline-style را قبل از خصوصیت out-line-color مقدار دهی نمایید.

مقدار پیشفرض invert
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.outlineColor="#00FF00"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت outline-color را پشتیبانی می کنند.

توجه: IE8 به !DOCTYPE! نیاز دارد.

نکته ها و ترفندها

outline خطی است که پیرامون عنصر قرار دارد. این خط در اطراف margin قرار دارد. با این وجود این خط با border تفاوت دارد.

outline جزء ابعاد عنصر به حساب نمی آید، بنابراین خصوصیت های طول و عرض عنصر شامل ضخامت outline نمی شود.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
color

رنگ outline را مشخص می کند. برای مشاهده مقادیر ممکن برای مقدار رنگ به HTML Colors مراجعه فرمایید.
invert

یک رنگ معکوس را به خط خارجی می دهد. این مقدار همواره بدون در نظر گرفتن رنگ پس زمینه،خط خارجی را نمایش می دهد.
inherit  تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت outline-style

مثال

تنظیم کردن استایل یک outline:

p 
{
outline-style:dotted;
}

در انتهای این آموزش، مثال های بیشتری را خواهید دید.

تعریف و کاربرد

با استفاده از خصوصیت outline می توان یک خط خارجی اطراف عناصر رسم نمود، (خارج از border) تا عنصر را برجسته تر و واضح نمود.

با استفاده از خصوصیت outline-style می توان استایل outline را مشخص نمود.

مقدار پیشفرض none
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.outlineStyle="dotted"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت outline را پشتیبانی می کنند.

توجه: IE8 به !DOCTYPE! نیاز دارد.

 

نکته ها و ترفندها

outline خطی است که پیرامون عنصر قرار دارد. این خط در اطراف margin قرار دارد. با این وجود این خط با border تفاوت دارد.

outline جزء ابعاد عنصر به حساب نمی آید، بنابراین خصوصیت های طول و عرض عنصر شامل ضخامت outline نمی شود.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
none هیچ outline ی وجود ندارد.
hidden یک outline مخفی را مشخص می کند.
dotted یک outline نقطه چین را مشخص می کند.
dashed یک outline خط چین را مشخص می کند.
solid outline ثابت نمایش داده می شود.
double outline به صورت دو لبه نمایش داده می شود
groove outline سه بعدی گود دار نمایش داده می شود. اثر آن به outline-color بستگی دارد
ridge outline سهسه بعدی برجسته نمایش داده می شود. اثر آن به outline-color بستگی دارد
inset outline سه بعدی inset نمایش داده می شود. اثر آن به outline-color بستگی دارد
outset outline سه بعدی outset نمایش داده می شود. اثر آن به outline-color بستگی دارد
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت outline-width

مثال

تنظیم کردن استایل یک outline:

p 
{
outline-style:dotted;
outline-width:5px;
}

تعریف و کاربرد

با استفاده از خصوصیت outline می توان یک خط خارجی اطراف عناصر رسم نمود، (خارج از border) تا عنصر را برجسته تر و واضح نمود.

با استفاده از خصوصیت outline-width می توان ضخامت outline را مشخص نمود.

توجه: همواره خصوصیت outline-style را قبل از خصوصیت outline-width مقدار دهی نمایید.

مقدار پیشفرض medium
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.outlineWidth="thin"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت outline-width را پشتیبانی می کنند.

توجه: IE8 به DOCTYPE! نیاز دارد.

نکته ها و ترفندها

outline خطی است که پیرامون عنصر قرار دارد. این خط در اطراف margin قرار دارد. با این وجود این خط با border تفاوت دارد.

outline جزء ابعاد عنصر به حساب نمی آید، بنابراین خصوصیت های طول و عرض عنصر شامل ضخامت outline نمی شود.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
thin یک outline نازک (thin) تعریف می کند.
medium یک outline متوسط (medium) تعریف می کند. (مقدار پیشفرض)
thick یک outline ضخیم (thin) تعریف می کند.
length به شما اجازه می دهد که میزان ضخامت outline را خودتان مشخص نمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

border-bottom-left-radius

مثال

گرد کردن گوشه پایین سمت چپ یک عنصر <div>:

div
{
border:2px solid;
border-bottom-left-radius:2em;
}

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-bottom-left-radius را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت border-bottom-left-radius را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت border-bottom-left-radius، می توانید شکل لبه در گوشه پایین سمت چپ را تعیین نمایید.

نکته: این خصوصیت به شما اجازه می دهد تا گوشه های عناصر را گرد نمایید.

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderBottomLeftRadius="5px"

نحوه استفاده

border-bottom-left-radius: length|% [length|%];

توجه: دو مقدار lenght یا درصد در خصوصیت border-bottom-left-radius در واقع مشخص کننده شعاع یکی از چهار سمت بیضی است که شکل گوشه های بیرونی لبه را تعریف می کند.

مقدار اول شعاع افقی و مقدار دوم شعاع عمودی است. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار توضیحات نمایش دادن
length شکل گوشه ی پایین سمت چپ را تعیین می کند.
% شکل گوشه ی پایین سمت چپ را به درصد تعیین می کند.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

border-bottom-right-radius

مثال

گرد کردن گوشه پایین سمت راست یک عنصر <div>:

div
{
border:2px solid;
border-bottom-right-radius:2em;
}

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت border-bottom-right-radius را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت border-bottom-right-radius را پشتیبانی نمی کند.

تعریف و کاربرد

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

نکته: این خصوصیت به شما اجازه می دهد تا گوشه های عناصر را گرد نمایید.

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderBottomRightRadius="5px"

نحوه استفاده

border-bottom-right-radius: length|% [length|%];

توجه: دو مقدار lenght یا درصد در خصوصیت border-bottom-right-radius در واقع مشخص کننده شعاع یکی از چهار سمت بیضی است که شکل گوشه های بیرونی لبه را تعریف می کند.

مقدار اول شعاع افقی و مقدار دوم شعاع عمودی است. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار توضیحات نمایش دادن
length شکل گوشه ی پایین سمت راست را تعیین می کند.
% شکل گوشه ی پایین سمت راست را به درصد تعیین می کند.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-image

مثال

مشخص کردن یک عکس بعنوان border:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

    

مرورگرهای Firefox, Chrome, Safari 6، خصوصیت border-image را پشتیبانی می کنند.

مرورگر Opera به پیشوند -o- نیاز دارد.

مرورگر Safari 5 به پیشوند -webkit- نیاز دارد.

تعریف و کاربرد

با استفاده از خصوصیت مختصر border-image، می توانید در یک مرحله خصوصیت های زیر را تعیین نمایید:

  1. border-image-source
  2. border-image-slice
  3. border-image-width
  4. border-image-outset
  5. border-image-repeat

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

می توانید از خصوصیات border-image برای ایجاد دکمه های زیبا با اندازه های مختلف استفاده نمایید. 

مقدار پیشفرض none 100% 1 0 stretch
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderImage="url(border.png) 30 30 round"

نحوه استفاده

border-image: source slice width outset repeat;

با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید.

مقدار توضیحات نمایش دادن
border-image-source

آدرس مسیر عکسی که به عنوان border (حاشیه) استفاده شده است. 

  
border-image-slice

با استفاده از خصوصیت border-image-slice، می توانید حاشیه داخلی image-border را مشخص نمایید.

  
   
border-image-outset

 

  
border-image-repeat نحوه نمایش تصویر در حاشیه را مشخص می کند
  • تکرار شود (repeat)
  • با تغییر اندازه تصویر، بدون برش از ابتدا تا انتهای ناحیه بصورت یکسان تکرار شود (round)
  • کشیده شود (stretch)
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-image-repeat

مثال

تعیین کردن چگونگی تکرار image-border:

div
{
border-image-source: url(border.png);
border-image-repeat: round;
}

پشتیبانی مرورگرها

    

هیچ کدام از مرورگرهای اصلی، خصوصیت border-image-repeat را پشتیبانی نمی کنند.

می توانید به بیاموز border-image مراجعه نمایید.

تعریف و کاربرد

با استفاده از خصوصیت border-image-repeat می توانید نحوه ی نمایش تصویر در ناحیه border را تعیین نمایید.

حالات ممکن:

  • تکرار شود (repeat)
  • با تغییر اندازه تصویر، بدون برش از ابتدا تا انتهای ناحیه بصورت یکسان تکرار شود (round)
  • کشیده شود (stretch)
مقدار پیشفرض stretch
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderImageRepeat="round"

نحوه استفاده

border-image-repeat: stretch|repeat|round;

توجه: این خصوصیت را می توانید با دو مقدار تنظیم نمایید، مقدار اول نحوه نمایش تصویر در حاشیه بالا و پایین و مقدار دوم نحوه نمایش در حاشیه سمت راست و چپ را مشخص می کند. اگر مقدار دوم قلم گرفته شود، فرض می کند که با مقدار اول یکسان است.

مقدار توضیحات
stretch تصویر کشیده می شود تا ناحیه مورد نظر کامل پر شود.
repeat تصویر تکرار می شود تا ناحیه مورد نظر کامل پر شود.
round مانند repeat عمل می کند با این تفاوت که اگر تعداد تکرارهای کامل تصویر، کل ناحیه مورد نظر را نپوشاند، اندازه تصویر اصلی کمی بزرگ یا کوچک می شود. توجه داشته باشید که تصویر در این حالت، از ابتدا تا انتهای ناحیه بصورت یکسان تکرار خواهد شد.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت border-image-slice

مثال

تعیین حاشیه داخلی border-image (از لبه های عکس به سمت درون 50 درصد برش بخورد):

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

پشتیبانی مرورگرها

    

هیچ کدام از مرورگرهای اصلی، خصوصیت border-image-slice را پشتیبانی نمی کنند.

می توانید به بیاموز border-image مراجعه نمایید.

تعریف و کاربرد

با استفاده از خصوصیت border-image-slice، می توانید حاشیه داخلی image-border را مشخص نمایید.

مقدار پیشفرض 100%
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderImageSlice="50% 50%"

نحوه استفاده

border-image-slice: number|%|fill;

توجه: این خصوصیت فاصله حاشیه داخلی (offset) از بالا، راست، پایین و چپ عکس اصلی را مشخص می کند و همانطور که در مثال زیر مشاهده می کنید عکس اصلی را به 9 ناحیه تقسیم می کند (4 تا گوشه، 4 تا لبه و 1 فضای وسط عکس). فضای وسط عکس حذف خواهد شد مگر اینکه از کلمه کلیدی "fill" استفاده نمایید.

این خصوصیت می تواند از یک تا چهار مقدار داشته باشد (مانند خصوصیت border-width) و ترتیب مقادیر بصورت top و right و bottom و left است. شما می توانید از واحدهای درصد یا پیکسل استفاده کنید. برای واحد درصد از علامت "%" استفاده نمایید و برای پیکسل نیازی به آوردن "px" نیست.

اگر مقدار چهارم قلم گرفته شود، با مقدار دوم تنظیم خواهد شد، اگر مقدار سوم قلم گرفته شود با مقدار اول تنظیم می شود و اگر مقدار دوم قلم گرفته شود با مقدار اول تنظیم می شود. مقادیر منفی قابل قبول نیست.

مثال:

border-image-slice: 25% 30% 10% 20%; 
border-image-slice: 25 30 10 20 ;

در مثال بالا، چون که تصویر 100px x 100px است دو قانون نوشته شده یکسان است.