اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی border-image-slice در CSS

ویژگی border-image-slice در CSS

border-image-slice Property

عناصر مرتبط:
border-image-repeat  border-image-source

ویژگی border-image-slice در CSS مشخص می کند که تصویری که توسط border-image-source تعیین می شود، چگونه برش داده شود. این تصویر همواره به 9 قسمت تقسیم میشود. 4 گوشه، چهار ضلع و قسمت میانی. قسمت میانی همیشه خالی در نظر گرفته میشود بجز زمانیکه از مقدار fill استفاده شود.

در تصویر زیر این مکانها نمایش داده شده اند:

  • مناطق یک تا چهار، گوشه ها هستند. هرکدام اینها تنها یک بار بکار گرفته می شوند تا گوشه های تصویرِ نهایی را شکل دهند.
  • مناطق پنج تا هشت، اضلاع هستند. این مناطق تکرار می شوند، تغییر اندازه می دهند یا به طرق دیگر تغییر شکل پیدا می کنند تا با ابعاد عنصر مطابقت پیدا کنند.
  • منطقه نه، قسمت میانی عنصر است. این منطقه بطور پیشفرض دیده نمی شود اما در صورت استفاده از کلیدواژه fill مانند تصویر پس زمینه عمل خواهد کرد.

نحوه نوشتار

/* تمام جهات */
border-image-slice: 30%;

/* افقی | عمودی */
border-image-slice: 10% 30%;

/* پایین | افقی | بالا */
border-image-slice: 30 30% 45;

/* چپ | پایین | راست | بالا */
border-image-slice: 7 12 14 5; 

/* (fill) استفاده از کلید واژه */
border-image-slice: 10% fill 7 12;

ویژگی border-image-slice چهار مقدار می پذیرد که میتواند بصورت عددی و یا درصد باشد. این مقادیر موقعیت هر برش را مشخص می کند. مقادیر منفی غیر قابل استفاده هستند.

مقادیر

عدد

عددها نمایانگر تعداد پیکسل در تصاویر پیکسلی و مختصات برای تصاویر وکتور هستند.

درصد

در صد ها با عرض و ارتفاع تصویر در ارتباط هستند.

fill​

سبب میشود تا قسمت میانی تصویر دیده شود.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="border-image1">border-image-slice: 15%;</div>
<div class="border-image2">border-image-slice: 25%;</div>
<div class="border-image3">border-image-slice: 35%;</div>
<p>از این تصویر استفاده شده است:</p>
<img src="http://my-project.ir/img/border.png" />

css

div {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(http://my-project.ir/img/border.png) round;
    font-family: monospace;
    margin-top: 20px;
}
.border-image1 {
    border-image-slice: 15%; 
}
.border-image2 {
    border-image-slice: 25%; 
}
.border-image3 {
    border-image-slice: 35%; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی میکنند.

پست قبلی

ویژگی border-image-repeat در CSS

پست بعدی

ویژگی border-image-source در CSS

پست بعدی
css-border-image-source-property

ویژگی border-image-source در CSS

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن