Sifat border-image-outset
Sifat border-image-outset membolehkan
mengalihkan sempadan ke luar elemen. Nilai dinyatakan
sebagai nombor tanpa unit pengukuran atau sebarang
unit
untuk saiz, kecuali peratusan. Jika nombor tanpa
unit dinyatakan, ia merupakan pengganda yang
mendarabkan nilai sifat border-width.
Nilai negatif tidak disokong.
Untuk maklumat lebih terperinci mengenai imej
untuk sempadan, lihat sifat border-image.
Sintaks
selector {
border-image-outset: nombor positif;
}
Contoh . Nombor
Mari tetapkan nilai border-image-outset
kepada 3 apabila tetikus melayang di atas elemen.
Pada masa yang sama, sempadan akan beralih sebanyak 26px*3 -
3 kali lebih jauh daripada lebarnya, yang ditetapkan
dalam border-width:
<div id="elem"></div>
#elem:hover {
border-image-outset: 3;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 100px auto;
}
:
Contoh . Piksel
Mari tetapkan nilai border-image-outset
kepada 30px apabila tetikus melayang di atas elemen.
Pada masa yang sama, sempadan akan beralih sebanyak 30px:
<div id="elem"></div>
#elem:hover {
border-image-outset: 30px;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 50px auto;
}
:
Lihat juga
-
sifat
border-image,
yang merupakan singkatan untuk sempadan-imej -
sifat
border-image-source,
yang menetapkan laluan ke imej untuk sempadan -
sifat
border-image-slice,
yang membahagikan imej untuk sempadan -
sifat
border-image-repeat,
yang mengulang imej untuk sempadan -
sifat
border-image-width,
yang menetapkan saiz imej untuk sempadan