CSS offset-position özelliği

Tanım ve Kullanım

offset-position öznitelik elemanın yol üzerindeki başlangıç konumunu belirler.

Eğer Önceki sayfa fonksiyon kendi başlangıç konumunu belirlememişse offset-position değeri, elemanın kayma yolunda hareket ederken başlangıç konumunu belirler。

Örnek

Örnek 1

Belirtilen elemanın başlangıç konumu sağ alt köşe olmalıdır：

#square {
  width: 60px;
  height: 60px;
  background: mavi;
  offset-position: sağ alt;
  offset-path: ray(45deg);
}

Kişisel olarak deneyin

Örnek 2

Farklı yanıt başlangıç konumlarını görmek için:

#square1 {
  width: 40px;
  height: 40px;
  background: pembe;
  text-align:center;
  offset-position: sağ alt;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: kırmızı;
  text-align:center;
  offset-position: sol üst;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: sarı;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: turkuaz;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavanda;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Kişisel olarak deneyin

CSS Dilbilgisi

offset-position: auto|normal|position|initial|inherit;

Özellik Değeri

Teknik Ayrıntılar

Tarayıcı Desteği

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

相关页面

SVG yolİlgili sayfalar

SVG yolEğitim:

CSS animasyonuCSS offset özelliği

CSS animasyonuCSS offset-anchor özelliği

CSS animasyonuCSS offset-distance özelliği

CSS animasyonuCSS offset-path özelliği

CSS animasyonuCSS offset-rotate özelliği