با استفاده از ویژگی border-image در CSS، می‌توانید به جای استفاده از حاشیه‌های معمولی، از یک تصویر به عنوان حاشیه برای یک عنصر استفاده کنید.
ویژگی border-image در CSS
ویژگی border-image به شما امکان می‌دهد تا یک تصویر را به جای حاشیه دور یک عنصر قرار دهید.
این ویژگی دارای سه بخش است:
- تصویری که به عنوان حاشیه استفاده می‌شود.
- محل برش تصویر.
- تعیین اینکه آیا بخش‌های میانی باید تکرار یا کشیده شوند.
برش تصویر به صورت جدول سه‌درسه
ویژگی border-image تصویر را به ۹ بخش مانند یک تخته “tic-tac-toe” برش می‌دهد. سپس گوشه‌ها در گوشه‌های عنصر قرار می‌گیرند و بخش‌های میانی تکرار یا کشیده می‌شوند، همان‌طور که شما مشخص می‌کنید.
نکته: برای کار کردن ویژگی border-image، نیاز است که ویژگی border نیز روی عنصر تنظیم شده باشد!
در اینجا، بخش‌های میانی تصویر تکرار می‌شوند تا حاشیه ایجاد شود:
<div id="borderimg">یک تصویر به عنوان حاشیه!</div>کد نمونه:
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url('border.png') 30 round;
}در اینجا، بخش‌های میانی تصویر کشیده می‌شوند تا حاشیه ایجاد شود:
<div id="borderimg">یک تصویر به عنوان حاشیه!</div>کد نمونه:
#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 است.
برش‌های مختلف در ویژگی border-image
مقادیر برش مختلف ظاهر حاشیه را به طور کامل تغییر می‌دهد:
مثال ۱:
border-image: url('border.png') 50 round;مثال ۲:
border-image: url('border.png') 20% round;مثال ۳:
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;
}با استفاده از ویژگی‌های border-image، می‌توانید به راحتی جلوه‌های حاشیه خلاقانه‌ای را به عناصر خود اضافه کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام