Īpašība border-image-outset

Īpašība border-image-outset ļauj pārvietot robežu ārpus elementa robežām. Kā vērtība tiek norādīts skaitlis bez mērvienībām vai jebkuras izmēru vienības, izņemot procentus. Ja norādīts skaitlis bez mērvienībām, tas ir reizinātājs, ar kuru tiek reizināta īpašības border-width vērtība. Negatīvas vērtības netiek atbalstītas.

Lai iegūtu sīkāku informāciju par robežu attēliem, skatiet īpašību border-image.

Sintakse

selektors {
	border-image-outset: pozitīvs skaitlis;
}

Piemērs . Skaitlis

Iestatīsim border-image-outset vērtību uz 3, kad peles kursors atrodas virs elementa. Šajā gadījumā robeža tiks pārvietota par 26px*3 - 3 reizes tālāk nekā tās platums, kas norādīts īpašībā 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;
}

Piemērs . Pikseļi

Iestatīsim border-image-outset vērtību uz 30px, kad peles kursors atrodas virs elementa. Šajā gadījumā robeža tiks pārvietota par 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;
}

Skatiet arī

īpašība border-image,
kas ir saīsinājums robežas attēlam
īpašība border-image-source,
kas norāda ceļu uz attēlu robežai
īpašība border-image-slice,
kas sadala attēlu robežai
īpašība border-image-repeat,
kas atkārto attēlu robežai
īpašība border-image-width,
kas norāda attēla izmēru robežai