#css #前端 #demo #小知识 #codepen
CSS Tip 📖

Use CSS shape-outside to wrap text around shapes


.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%));
}


jhey 分享了使用CSS shape-outside 属性来围绕形状包裹文本的技巧。通过在两列布局中为每一列设置一个半圆形状，可以实现复杂的文本环绕效果。此方法要求手动分割内容到列中，不支持与 column-count 属性协同工作。尽管有这样的限制，但这种方法适用于某些登陆页等场景，是2024年中浮动布局(float layout)的一个罕见但有效的应用案例。

Origin Post | Codepen
 
 
Back to Top