تصاویر حاشیه (Border Images)
«تصاویر حاشیه (Border Images)» در CSS یعنی استفاده از یک تصویر به جای کادر ساده. «slice» یعنی برش تصویر به 9 تکه. سپس گوشه ها سرجای خود می نشینند و میانه کشیده یا تکرار می شود.
border-image چیست و چگونه کار می کند؟
ویژگی «border-image» شورت هند چند ویژگی است: منبع تصویر، برش، پهنا، بیرون زدگی و تکرار. برای کارکرد آن، باید «border» هم تنظیم شود.
هشدار: بدون مقداردهی «border»، تصاویر حاشیه فعال نمی شود.
مثال 1: تکرار میانه با round
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
مثال 2: کشیدن میانه با stretch
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
مثال 3: تاثیر مقادیر slice متفاوت
#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 شفاف تعیین کن.
- border-image را با url و slice بده.
- حالت round یا stretch را آزمایش کن.
نکته: برای لبه های ساده تر، صفحه گوشه های گرد را ببین. همچنین برای ساختار صفحه، چیدمان وب سایت کمک می کند. اگر نیاز داشتی، همین تصاویر حاشیه را به عنوان الگو نگه دار.
جمع بندی سریع
- border لازم است تا border-image کار کند.
- slice نحوه برش تصویر را تعیین می کند.
- round تکرار می کند؛ stretch می کشد.
- درصدها رفتار برش را حساس تر می کنند.