不可思議的文字環(huán)繞效果保礼,你絕對沒有見過!

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末沪么,一起剝皮案震驚了整個濱河市乌企,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌成玫,老刑警劉巖加酵,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拳喻,死亡現(xiàn)場離奇詭異,居然都是意外死亡猪腕,警方通過查閱死者的電腦和手機冗澈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來陋葡,“玉大人亚亲,你說我怎么就攤上這事「停” “怎么了捌归?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長岭粤。 經常有香客問我惜索,道長,這世上最難降的妖魔是什么剃浇? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任巾兆,我火速辦了婚禮,結果婚禮上虎囚,老公的妹妹穿的比我還像新娘角塑。我一直安慰自己,他們只是感情好淘讥,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布圃伶。 她就那樣靜靜地躺著,像睡著了一般蒲列。 火紅的嫁衣襯著肌膚如雪留攒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天嫉嘀,我揣著相機與錄音,去河邊找鬼魄揉。 笑死剪侮,一個胖子當著我的面吹牛,可吹牛的內容都是我干的洛退。 我是一名探鬼主播瓣俯,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼兵怯!你這毒婦竟也來了彩匕?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤媒区,失蹤者是張志新(化名)和其女友劉穎驼仪,沒想到半個月后掸犬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡绪爸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年湾碎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奠货。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡介褥,死狀恐怖,靈堂內的尸體忽然破棺而出递惋,到底是詐尸還是另有隱情柔滔,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布萍虽,位于F島的核電站睛廊,受9級特大地震影響,放射性物質發(fā)生泄漏贩挣。R本人自食惡果不足惜喉前,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望王财。 院中可真熱鬧卵迂,春花似錦、人聲如沸绒净。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽挂疆。三九已至改览,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缤言,已是汗流浹背宝当。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留胆萧,地道東北人庆揩。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像跌穗,于是被迫代替她去往敵國和親订晌。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容