آموزش تصاویر حاشیه ای CSS

13 جولای 2021


ویژگی CSS-border-image

border-imageخاصیت CSS به شما امکان می دهد تصویری را تعیین کنید که به جای حاشیه طبیعی اطراف یک عنصر مورد استفاده قرار گیرد.

این ملک سه قسمت دارد:

  1. تصویری که به عنوان حاشیه استفاده می شود
  2. کجا می توان تصویر را برش داد
  3. مشخص کنید که قسمتهای میانی باید تکرار شوند یا کشیده شوند

ما از تصویر زیر استفاده خواهیم کرد (“border.png” نامیده می شود):

مرز

border-imageاموال تصویر طول می کشد و آن را برش به نه بخش، مانند یک هیئت مدیره ایکس او. سپس گوشه ها را در گوشه ها قرار می دهد و قسمتهای میانی همانطور که تعیین می کنید تکرار یا کشیده می شوند.

توجه: برای border-imageکار کردن ، این عنصر نیز به borderمجموعه ویژگی نیاز دارد !

در اینجا ، بخشهای میانی تصویر برای ایجاد حاشیه تکرار می شوند:

این کد است:

مثال

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

در اینجا ، بخشهای میانی تصویر برای ایجاد حاشیه کشیده شده اند:

این کد است:

مثال

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

نکته: این border-imageملک در واقع یک ویژگی مختصر برای border-image-source، border-image-slice، border-image-width، border-image-outset و border-image-repeatخواص است.


CSS-border-image – مقادیر مختلف برش

مقادیر مختلف برش ظاهر حاشیه را کاملاً تغییر می دهد:

مثال

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.