圖片環(huán)繞文字大家太熟悉了责语，這是初學css必須經歷的效果之一氓英。
但是你有沒有想過讓文字按照我們想要的方式進行環(huán)繞呢？
我是渡一子辰老師鹦筹，今天就來教大家實現(xiàn)這種奇妙的環(huán)繞方式。
下圖這種效果在一些設計感強的網站上經持访玻可以看到铐拐，給人一種炫酷和新穎的感覺。
其實练对，只要掌握一個 CSS 屬性遍蟋，就可以輕松實現(xiàn)這種效果。這個屬性就是 shape-outside螟凭，它可以讓浮動元素的外部文字按照指定的形狀進行環(huán)繞虚青，而不是按照默認的盒子邊緣。
shape-outside 的用法
shape-outside 的主要函數(shù)值有四個螺男，分別是：
- inset()：表示浮動文字按照上棒厘、右、下下隧、左在浮動元素上的偏移量得出的矩形邊緣進行圍繞
- circle()：表示浮動文字按照 shape-radius 為半徑畫出的圓形的外邊緣圍繞
- ellipse()：表示浮動文字按照 x 軸以 xr 為半徑奢人，y 軸以 yr 為半徑畫出的橢圓形的外邊緣圍繞
- polygon(x1 y1, x2 y2, ..., xn yn)：表示浮動元素按照，通過給定的坐標點的值連接畫出的不規(guī)則形狀的邊緣進行圍繞
polygon 參數(shù)說明：
x1：表示第一個點在x軸的坐標位置
y1：表示第一個點在y軸的坐標位置
x2：表示第二個點在x軸的坐標位置
y3：表示第二個點在y軸的坐標位置
xn：表示第n個點在x軸的坐標位置
yn：表示第n個點在y軸的坐標位置
shape-outside 的示例
我們來看幾個使用 shape-outside 的示例淆院，感受一下它的魅力何乎。
文字環(huán)繞橢圓
在正常情況下，我們使用浮動讓文字環(huán)繞是下圖的效果，為了便于理解和觀看支救，我們先給圖片加上邊框抢野。
我們在給圖片設置一個圓形的裁剪效果，這時候各墨，你會發(fā)現(xiàn)文字并沒有按照圓形來環(huán)繞指孤，而還是按照盒子來環(huán)繞。
為了讓文字按照圓形來環(huán)繞欲主，我們只需要給圖片添加一個 shape-outside: circle(50%); 的屬性即可邓厕。
這里 50% 表示半徑是盒子寬度的一半，也就是畫了一個內切圓扁瓢。
如果想要調整圓心或者半徑详恼，可以使用完整的寫法 shape-outside: circle(50% at 50% 50%)，其中 50% 50% 表示圓心在盒子中心引几。
設置后昧互，我們就得到了如下效果：
文字環(huán)繞多邊形
如果我們想要讓文字環(huán)繞一個多邊形或者一個不規(guī)則圖形，我們可以使用 shape-outside: polygon() 的屬性伟桅。
比如敞掘，我們可以設置 shape-outside: polygon(0 0, 59% 0, 36% 18%, 42% 28%, 75% 30%, 90% 43%, 97% 58%, 88% 80%, 94% 97%, 0 97%);，表示多邊形由這些坐標點連接而成楣铁。
設置后玖雁，我們就得到了如下效果：
總結
shape-outside 是一個非常有趣和實用的 CSS 屬性，它可以讓我們實現(xiàn)很多富有創(chuàng)意和美感的文字環(huán)繞效果盖腕。
如果你想了解更多關于這個屬性的用法和兼容性赫冬，請參考 MDN 的文檔，其實它的用法和 clip-path 基本上是一致的溃列。
這個效果其實并不難實現(xiàn)劲厌，但由于確實很少有人用，我們也難以判斷出該用什么樣的實現(xiàn)思路听隐，所以平常還是要保證自己的知識體系細致补鼻。
如果你有什么問題或建議，請在評論區(qū)留言雅任，如果你覺得這篇文章有用风范，請點贊收藏或分享給你的朋友！
