文字环绕距离控制

最新推荐文章于 2023-09-01 09:45:32 发布

gunsmoke

最新推荐文章于 2023-09-01 09:45:32 发布

阅读量135

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/104447011

版权

CSS 专栏收录该内容

28 篇文章

订阅专栏

.rect {
            width: 100px;
            height: 100px;
            border: solid 2px red;
            float: left;
            margin: 0;
            shape-outside: margin-box;   // 这里是关键
       }
<p>
    <span class="rect"></span>
</p>

设置完shape-outside: margin-box后，然后再设置margin就可以控制环绕文字离方框之间的距离了，注意这里的shape-outside也可以设置为图形，比如shape-outside:circle(50% at 50% 50%)，那么文字将会环绕一个圆形去排列，也可以设置为多边形polygon(50% 0, 0 100%, 100% 100%)，可以参考下一篇博客css简单绘图