CSS中有很多酷炫的效果可以讓網頁看起來更有活力,其中就包括了讓文字圍繞圓形排列的效果。這個效果可以用CSS中的shape-outside
屬性和circle()
函數來實現。
.text { width: 200px; height: 200px; background-color: pink; shape-outside: circle(100px at 100px 100px); }
上面的代碼就可以讓一個200px*200px大小的元素圍繞一個半徑為100px、圓心為(100px, 100px)的圓形進行排列。
另外,除了circle()
函數外,CSS還提供了其他的函數可以定義不同的形狀,如ellipse()
和inset()
等,可以根據實際需求做出不同的排列效果。
需要注意的是,shape-outside
屬性目前只支持Chrome和Firefox瀏覽器,其他瀏覽器暫不支持。在使用時需要考慮到瀏覽器兼容性問題。