تصویر کناره CSS

تصویر کناره CSS

با استفاده از CSS border-image ویژگی که می‌تواند تصویر را به عنوان حاشیه دور از عنصر تنظیم کند.

ویژگی border-image CSS

CSS border-image ویژگی به شما اجازه می‌دهد تا تصویری که می‌خواهید استفاده کنید را مشخص کنید، نه حاشیه معمولی.

این ویژگی شامل سه بخش است:

  • تصویر مورد استفاده برای حاشیه
  • جایی که تصویر برش داده می‌شود
  • تعریف می‌کند که بخش وسط باید تکرار شود یا کشیده شود

ما از این تصویر ("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 - مقدارهای برش مختلف

مقدارهای برش مختلف باعث تغییر کامل ظاهر حاشیه می‌شود:

مثال 1:

border-image: url(border.png) 50 round;

مثال 2:

border-image: url(border.png) 20% round;

مثال 3:

border-image: url(border.png) 30% round;

این کد است:

مثال

#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;
}

آزمایش شخصی کنید

ویژگی تصویر حاشیه CSS

ویژگی توضیح
border-image ویژگی کوتاه برای تنظیم تمام ویژگی‌های border-image-*.
border-image-source تعریف مسیر تصویر مورد استفاده برای حاشیه.
border-image-slice تعیین نحوه برش تصویر حاشیه.
border-image-width تعیین عرض تصویر حاشیه.
border-image-outset تعیین مقدار تصویر حاشیه که از جعبه حاشیه خارج می‌شود.
border-image-repeat تعیین اینکه آیا باید تصویر حاشیه تکرار شود، گرد شود یا کشیده شود.