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