CSS：實現文字環繞在圖片周圍的效果

要想讓文字環繞在圖片的周圍，讓圖片 float 就可以了；如果還想要實現文字圓形環繞圖片的效果，可以使用 shape-outside: circle(); 屬性。

<p>《程序員修煉之道（從小工到專家）》
  <img class="left"
    src="https://img-blog.csdnimg.cn/20200512093847525.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J1bGVfZGF6ZQ==,size_16,color_FFFFFF,t_70"
    width="200px" />
  第一章 · 注重實效的哲學 注重實效的程序員能夠越出直接的問題去思考，總是設法把問題放在更大的語境中，總是設法注意更大的圖景。 關心你的技藝。 思考！你的工作。1. 我的源碼讓貓給吃了
  對你的職業生涯負責，並且不害怕承認無知或錯誤。 當你犯錯誤、或是判斷失誤時，誠實地承認它，並設法給出各種選擇。不要責備別人或別的東西，或是拼湊藉口。 2. 軟件的熵
  不要容忍破窗戶。 不要留着“破窗戶”（低劣的設計、錯誤決策、或是糟糕的代碼）不修，發現一個就修一個。
  如果沒有足夠的時間進行適當的修理，就用木板把它定起來（或許你可以把出問題的代碼放入註釋，或是顯示“未實現”消息，或是用虛設的數據加以替代）。
  如果你發現你的團隊和項目的代碼十分漂亮——編寫整潔、設計良好，並且很優雅——你就很可能會格外注意不去把它弄髒。 3. 石頭湯與煮青蛙 做變化的催化劑。 記住大圖景。 要持續不斷地觀察周圍發生的事情，而不只是你自己在做的事情。
  4. 足夠好的軟件 給用戶機會，讓他們參與決定你所製作的東西何時已足夠好。 使質量成爲需求問題。 不要因爲過度修飾和過於求精而損毀完好的程序。 5. 你的知識資產 定期投資 多元化 管理風險 低買高賣 重新評估和平衡
  定期爲你的知識資產投資。
</p>

p {
  margin: 0 auto;
  width: 50%;
  margin-top: 80px;
}

img.left {
  border-radius: 100%;
  float: left;
  shape-outside: circle();
  margin: 35px 25px 25px 0;
}

img.right {
  border-radius: 100%;
  float: right;
}

效果圖：