Ī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

cssselektors {
  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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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ī