CSS3 提供了基于 elliptical layout 的文本排版方式,這種排版方式可以讓文本沿著橢圓形繞行,并且能夠設置橢圓的長軸和短軸,使得排版效果更加靈活。這一特性可通過 CSS 中的 "shape-outside" 屬性來實現。
.box { shape-outside: ellipse(50% 50% at 50% 50%); width: 200px; height: 400px; float: left; margin-right: 20px; background-color: #e3f2fd; }
在上面的代碼中,我們給 ".box" 元素設置了"shape-outside: ellipse(50% 50% at 50% 50%)",這表示一個中心位于元素中心的橢圓形,其中長軸和短軸的半徑大小分別為50%。"at 50% 50%"表示這個橢圓形的中心與元素中心重合。這樣設置之后,我們在 ".box" 元素內添加文本,就會按照橢圓型排列。
需要注意的是,這一特性要求瀏覽器支持 CSS Shapes 特性,目前一些瀏覽器尚不完全支持該特性,如果需要兼容性更好的方案,可以考慮使用 SVG 或者 Canvas 實現類似效果。
除了橢圓形外,"shape-outside" 還支持圓形、多邊形等形狀,通過不同的參數組合,可以實現豐富多彩的排版效果。
上一篇24歲學php還有前途嗎
下一篇php array長度