border-image-outset Özelliği

border-image-outset özelliği, kenarlığı öğenin sınırlarının dışına kaydırmanıza olanak tanır. Değer olarak, ölçü birimi belirtilmeden bir sayı veya yüzde hariç herhangi bir boyut birimi kullanılabilir. Ölçü birimi olmadan bir sayı belirtilirse, bu sayı, border-width özelliğinin değerleriyle çarpılan bir çarpan görevi görür. Negatif değerler desteklenmez.

Kenarlık görselleri hakkında daha ayrıntılı bilgi için border-image özelliğine bakın.

Sözdizimi

cssseçici {
  border-image-outset: pozitif sayı;
}

Örnek . Sayı

Fare öğenin üzerine geldiğinde border-image-outset değerini 3 olarak ayarlayalım. Bu durumda kenarlık, 26px*3 - border-width içinde ayarlanan genişliğinin 3 katı kadar uzağa kaydırılacaktır:

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;
}

Результат:

Örnek . Piksel

Fare öğenin üzerine geldiğinde border-image-outset değerini 30px olarak ayarlayalım. Bu durumda kenarlık 30px kaydırılacaktır:

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;
}

Результат:

Ayrıca Bakınız