Xüsusiyyət border-image-source
Xüsusiyyət border-image-source sərhəd üçün
şəkil təyin edir. Ətraflı məlumat üçün baxın:
xüsusiyyət border-image.
Sintaksis
selektor {
border-image-source: url(şəklin yolu);
}
Nümunə
Xüsusiyyət border-image-source birlikdə
border-image-slice ilə
təyin edilməlidir:
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Nümunə
Əgər border-image-slice xüsusiyyəti təyin edilməyibsə,
bütün şəkil künclərə düşəcək (çünki border-image-slice
standart olaraq 100% dəyərinə malikdir):
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Nümunə
Şəkil əvəzinə xətti qradient təyin etmək olar:
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-image-slice: 30;
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
Nümunə
Əgər border-image-slice xüsusiyyəti təyin edilməyibsə,
gradient künclərə düşəcək (çünki border-image-slice
standart olaraq 100% dəyərinə malikdir):
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
Nümunə
Əgər border-radius
xüsusiyyətini təyin etsəniz, təəssüf ki, sərhəd yuvarlaqlaşdırılmayacaq
(qradient vəziyyətində də), baxmayaraq ki, effekt
kifayət qədər maraqlı olacaq:
<div id="elem"></div>
#elem {
border-radius: 100px;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Həmçinin baxın
-
xüsusiyyət
border-image,
sərhəd-şəkli üçün qısa yazılışdır -
xüsusiyyət
border-image-slice,
sərhəd üçün şəklin bölünməsidir -
xüsusiyyət
border-image-repeat,
sərhəd üçün şəklin təkrarıdır -
xüsusiyyət
border-image-width,
sərhəd üçün şəklin ölçüsünü təyin edir -
xüsusiyyət
border-image-outset,
sərhəd üçün şəklin yerdəyişməsini təyin edir