این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با ویژگی Border-Image در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Border-Image در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش کار با ویژگی Border-Image در CSS
خب ما یه ویژگی داریم به اسم border که این ویژگی میاد و یه خط رو به دور لبه های تگ میکشه، حال ویژگی border-image میاد و بجای اون خط ، عکس قرار میده، همین تموم شد رفت
- border-image-source : آدرس تصویر
- border-image-slice : نحوه برش زدن تصویر
- border-image-width : اندازه عرض تصویر
- border-image-outset : فضای خالی اطراف تصویر
- border-image-repeat : نحوه تکرار تصویر
نکته : تصویری که در ادامه باهاش کار میکنیم تصویر زیر می باشد ( در واقع این تصویر می باشد که به دور لبه های عنصر کشیده می شود )
Free-Learn
ویژگی border-image-source
با استفاده از این ویژگی میتوان آدرس URL فایل تصویر را مشخص کرد، تصویری که قرار است به عنوان بوردِر به دور لبه های یک عنصر کشیده شود.
|
1 2 3 |
h2{ border-image-source: url("files/bg-border.png"); } |
Free-Learn
ویژگی border-image-slice
با استفاده از این ویژگی نیز میتوان نحوه برش زدن یا بطور کلی نحوه نمایش تصویر بوردِر را مشخص کرد.
مثال شماره ۱ : استفاده از ویژگی border-image-slice با مقدار ۳۰
|
1 2 3 |
h2{ border-image-slice:30; } |
Free-Learn
ویژگی border-image-width
همانطور که از این ویژگی مشخصه ما با استفاده از آن میتوانیم اندازه تصویر بوردِر را مشخص نماییم.
|
1 2 3 |
h2{ border-image-width:10px; } |
Free-Learn
ویژگی border-image-outset
با استفاده از این ویژگی نیز میتوان یک فضای خالی مشخصی رو اطراف تصویر ایجاد کرد.
|
1 2 3 |
.f1{ border-image-outset:3px; } |
Free-Learn
ویژگی border-image-repeat
با استفاده از این ویژگی نیز میتوان مشخص کرد که حالت نمایش تصویر بوردِر چگونه باشد، مثلا تصویر بصورت کاشی وار تکرار شود یا مثلا بصورت گرد شده یا بصورت کشیده نمایش داده شود.
مثال شماره ۱ : حالت تکرار ( repeat )
|
1 2 3 |
.f1{ border-image-repeat:round; } |
Free-Learn
خلاصه نویسی ویژگی border-image
با استفاده از خلاصه نویسی ، دیگه لازم نیست بیایم و بصورت تک تک و مجزا دستورات رو بنویسیم، بلکه کافیه از ویژگی border-image بصورت خلاصه نویسی استفاده کرد.
شکل کلی این ویژگی در حالت خلاصه نویسی بصورت زیر می باشد :
- border-image-source
- border-image-slice
- border-image-repeat
|
1 |
border-image: border-image-source|border-image-slice|border-image-repeat; |
مثال :
|
1 2 3 |
.f1{ border-image:url("files/bg-border.png") 20 round; } |
