shape-outsideMülkiyet kontrolleri nasıl içerik süzülüyor öğenin sınırlayıcı kutusunu etrafında kaydırılır. Tipik olarak bu, metnin daire, elips veya çokgen gibi bir şeklin üzerinde yeniden akmasını sağlamak içindir:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Gelecekte değişmesi muhtemel olsa da, bu özelliğin şimdilik yalnızca kayan öğeler üzerinde çalışacağını unutmamak önemlidir. shape-outsideTesis ayrıca geçişler veya animasyonlarla manipüle edilebilir.
Değerler
circle(): dairesel şekiller yapmak için.ellipse(): eliptik şekiller yapmak için.inset(): dikdörtgen şekiller yapmak için.polygon(): 3 veya daha fazla köşeli herhangi bir şekil oluşturmak için.url(): metnin etrafına sarmak için hangi görüntünün kullanılması gerektiğini tanımlar.initial: şamandıra alanı etkilenmez.inherit:shape-outsidedeğeri ebeveynden devralır .
Aşağıdaki değerler, şekli içinde konumlandırmak için kutu modelinin hangi referansının kullanılması gerektiğini tanımlar:
margin-boxpadding-boxborder-box
Bu değerler, örneğin, ucuna eklenmesi gereken: shape-outside: circle(50% at 0 0) padding-box. Varsayılan olarak margin-boxreferans kullanılacaktır.
elips()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )ellipse()Fonksiyon x yarıçapları değerleri gerektiren, koordinatları ve ardından elips y ekseni sınırlayıcı kutusunun içinde şeklinin merkezi konumuna getirin. Örneğin, yukarıdaki örnek, elipsin merkezini .elementdiv'in dikey ve yatay merkezine yerleştirecektir :
Yukarıdaki demo divkendisinin şeklini değiştirdiğimizi öne sürse de , sınırlar ve bir arka plan görüntüsü eklersek, sınırlayıcı kutunun aslında hala dikdörtgen olduğunu görürüz:
Bunu şu şekilde düşünmek daha iyi olabilir: özellikle shape-outside, öğenin kendisinin geometrisini değil, bir öğenin etrafındaki diğer öğelerin ilişkisini değiştiriyoruz. Bu örnekte olduğu gibi shape-outside, clip-path()mülkün yanında kullanmamız gerekeceğini düzeltmek için :
daire()
.element ( shape-outside: circle(50%); )Bu işlev bir daire oluşturur ve yukarıdaki kod örneğinde yarıçapı yarı yüksekliğinin ve genişliğinin yarısı olan bir daire oluşturur .element. circle()Fonksiyonu, içinde şekil konumlandırılması için aynı sözdizimini kullanabilir.
url ()
.element ( shape-outside: url('circle.png.webp'); )Bu örnekte, biri bir metin bloğunun her iki tarafında olmak üzere iki kayan resmimiz var. Her iki görüntünün de shape-outsideözelliği ayarlanmış olduğundan, alttaki metin bu iki kaymayı önleyecektir.
Ayrıca shape-image-threshold, şeffaflıklarına bağlı olarak hangi piksellerin şekli oluşturması gerektiğini tarayıcıya bildirecek özelliği ayarlamak da mümkündür . Örneğin:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Bu örnekte, şekli oluşturacak pikseller% 50 ve üzeri şeffaflığa sahip olmalıdır. Dan Değerler 0.0için (saydam) 1.0(opak) geçerlidir.
çokgen()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Bu işlev, üç veya daha fazla köşesi olan herhangi bir şekli oluşturur, örneğin:
Bu özellik canlandırılacaksa, animasyonlu durumu bildirdiğinizde aynı sayıda köşe gerektirdiğini unutmamak önemlidir:
.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )iç metin ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()dikdörtgen şekiller oluşturmak için bir işlevdir, beş parametre alır ancak beşincisi border-radiusisteğe bağlıdır. Diğer argümanlar, şunların kenarından içe doğru ofsetlerdir .element:
Yukarıda 200 piksel genişliğinde ve 200 piksel yüksekliğinde bir öğemiz var ve şekli sol taraf dışında her yönde 50 piksele kadar kaydırıyoruz. Böylelikle metin, div üste uzansa bile şeklin üzerine sarılır.
Tarayıcı desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 37 | 62 | Hayır | 79 | 7.1 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |