0

مرجع CSS

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

پاسخ به:مرجع CSS
سه شنبه 11 آذر 1393  12:18 AM

خصوصیت border-image-slice

مثال

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

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

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

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت 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 است دو قانون نوشته شده یکسان است.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

تشکرات از این پست
دسترسی سریع به انجمن ها