CSS shape-outside özelliği

Tanım ve Kullanım

shape-outside Özellik, iç içerik için sarım şekli tanımlamanıza izin verir. Öntanımlı olarak, iç içerik dış marj çerçevesi etrafında sarılır, ve shape-outsideile bu sarım yöntemini özelleştirebilirsiniz.

shape-outside Özellik, yüzen elementin yüzen alanını tanımlar. Bu yüzen alan, içerik yüzen elementi etrafında sarılan şekli tanımlar.

Örnek

İçerik, resmin etrafında dairesel bir şekilde sarılır:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Kişisel Deneyim

CSS Dilbilgisi

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

Özellik Değeri

Değer Açıklama
none Öntanımlı Değer. Yüzen alan etkilendirilmez. İçerik, elemanın dış marj çerçevesi etrafında sarılır.
margin-box Dış marj dış kenarları tarafından sarılan şekli tanımlar.
border-box Kenar çizgisi dış kenarları tarafından sarılan şekli tanımlar.
padding-box İç dolgu dış kenarları tarafından sarılan şekli tanımlar.
content-box

İçerik kenarları tarafından sarılan şekli tanımlar.

Bu kutunun her köşe yarıçapı 0 veya border-radius - border-width - padding'daki en büyük değerdir.
basic-shape Yüzen alan, inset()、circle()、ellipse() veya polygon() fonksiyonlarının şekillerine dayanır.
url(image) Yüzen alan, belirtilen resmin alpha kanalına dayanır ve shape-image-threshold ile tanımlanır.
initial Bu özelliği öntanımlı değerine ayarlar. Görünüm initial.
inherit Bu özelliği ebeveyn elemanından miras alır. Görünüm inherit.

Teknik Ayrıntılar

Öntanımlı Değer: none
Geçişlik: Hayır
Animasyon Yapımı: basic-shape için evet. Animatable hakkında okuyun
Sürüm: CSS Şekiller Modülü 1
JavaScript Dilbilgisi: object.style.shapeOutside="circle(50%)"

Tarayıcı Desteği

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

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24