【CSS】用shape完美实现文字环绕 circle、ellipse、polygon

最新推荐文章于 2025-06-23 17:23:59 发布

码婆Doph

最新推荐文章于 2025-06-23 17:23:59 发布

阅读量7k

点赞数

CC 4.0 BY-SA版权

分类专栏：原创 css

本文链接：https://blog.youkuaiyun.com/liu_jiachen/article/details/78633739

原创同时被 2 个专栏收录

58 篇文章

订阅专栏

css

14 篇文章

订阅专栏

本文详细介绍了 CSS 中的 Shape 属性，包括 shape-outside 和 shape-inside 的使用方法及注意事项。通过实例展示了如何利用这些属性实现文字围绕各种形状（如圆形、椭圆形、多边形等）的图片进行环绕的效果。

shape简介

shape有一下两个属性：
1.shape-outside：让文字从图片外部开始环绕，以及设置图片的形状
2.shape-inside：设置图片的内部形状，目前基本不支持

shape关键字如下（类似box-sizing）：

margin-box
content-box
border-box
padding-box

基本形状用以下函数来定义：

circle(size at x y);用于制作圆形size可以是%,px,rem,v*
ellipse(size);用于制作椭圆形
inset(top,right,bottom,left,round);…矩形前四个参数可缩写如padding格式
polygon(x1 y1,x2 y2,x3 y3…);..多边形
url();…从图像中提取形状，图像限于透明图片

下面用三角形文字环绕举例说明。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 20vw;
            height: 50vh;
            margin: 25vh auto;
        }
        .img{
            width: 200px;
            height: 200px;
            float: left;
            shape-outside: polygon(0 100%,50% 0,100% 100%);
            clip-path: polygon(0 100%,50% 0,100% 100%);
            background-color: pink;
        }
    </style>
<body>
<div class="block">
    <div class='img'>
        img
    </div>
    <div class="para">这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字</div>
</div>

效果如图：
这里写图片描述

其中clip-path函数具有浏览器兼容问题。我这里用Chrome。

如果想绘制

圆形：
shape-outside:circle(50%);
或者
shape-outside:circle(50% at 0 0);/精准绘制/
椭圆形:
shape-outside:ellipse(60%);

这里需要注意，如果绘制的图形超出图片的大小，则对于超出部分，文字依照原图图形环绕
矩形（带20%圆角）
shape-outside:inset(22px round 20%);

从上图我们可以很清楚地看到一个圆角矩形…（不要脸…）
提取形状
shape-outside:url(img/1.png);
shape-image-threshold: 0.9;

shape-image-threshold: 0.9;：用于创建形状像素的最小不透明级别，值在0-1之间