圖片環(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ū)留言雅任,如果你覺得這篇文章有用风范,請點贊收藏或分享給你的朋友!