CSS box-reflect özelliği

Tanım ve Kullanım

box-reflect Özellik, elemanın yansıma etkisini oluşturmak için kullanılır.

box-reflect Özelliğin değeri şu olabilir:

  • below(Alt)
  • above(Üst)
  • left(Sol Taraf)
  • right(Sağ Taraf)

Dikkat:box-reflect özellik standart olmayan bir özelliktir, kullanmak zorundasınız -webkit- önek.

örnek

Örnek 1

Resmin altına yansıma etkisi ekleyin:

img {
  -webkit-box-reflect: below;
}

Deneyin

Örnek 2

box-reflect Özellik, herhangi bir görünen HTML elementine uygulanabilir. Örneğin, <p> etiketi altında yansıma etkisi oluşturulur:

p {
  -webkit-box-reflect: below;
}

Deneyin

Örnek 3

box-reflect Özellik, iki değer dilgisi kullanılarak da kullanılabilir. Örneğin, resmin altında yansıma etkisi oluşturulur ve 70px mesafe belirlenir:

img {
  -webkit-box-reflect: below 70px;
}

Deneyin

Örnek 4

box-reflect Özellik, üç değer dilgisi kullanılarak da kullanılabilir. Örneğin, resmin altında yansıma etkisi oluşturulur, 10px mesafe belirlenir ve yavaşça solunur:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

Deneyin

CSS dilbilgisi

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

Özellik değeri

Değer Açıklama
none Varsayılan değer. Yansıma etkisi gösterilmez.
below Elementin altında yansıma etkisi oluşturur.
above Elementin üstünde yansıma etkisi oluşturur.
left Elementin sol tarafında yansıma etkisi oluşturur.
right Elementin sağ tarafında yansıma etkisi oluşturur.
position offset

İki değer dilgisi:

  • position Yansımanın konumunu (below, above, left veya right) ayarlamak için.
  • offset Yansımanın mesafesini ayarlamak için. Mesafe px, pt, cm gibi birimlerle belirlenebilir. Varsayılan değeri 0'dır.
position offset gradient

Üç değer dilgisi:

  • position Yansımanın konumunu (below, above, left veya right) ayarlamak için.
  • offset Yansımanın mesafesini ayarlamak için. Mesafe px, pt, cm gibi birimlerle belirlenebilir. Varsayılan değeri 0'dır.
  • gradient Yansımanın geçiş etkisini ayarlamak için, örneğin solma etkisini.
initial Bu özelliği, varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit Bu özelliği, ebeveyn elementinden miras alır. Ayrıca bakınız: inherit.

Teknik ayrıntılar

Varsayılan değer: none
Mirasçılık: Hayır
Animasyon yapımı: desteklenmiyor. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.webkitBoxReflect="below"

Tarayıcı desteği

Tablodaki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

İlk destekleyen -webkit- öne ekli olan numaraların sürümü.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- desteklenmiyor 4.0 -webkit- 15.0 -webkit-