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

朴灿烈づ我的快乐病毒、 2022-06-05 11:12 861阅读 0赞

## 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();…从图像中提取形状，图像限于透明图片

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

效果如图：  
![这里写图片描述][SouthEast]

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

如果想绘制

*  圆形：  
    shape-outside:circle(50%);  
    或者  
    shape-outside:circle(50% at 0 0);/*精准绘制*/
 *  椭圆形:  
    shape-outside:ellipse(60%);  
    ![这里写图片描述][SouthEast 1]  
    **这里需要注意，如果绘制的图形超出图片的大小，则对于超出部分，文字依照原图图形环绕**
 *  矩形（带20%圆角）  
    shape-outside:inset(22px round 20%);  
    ![这里写图片描述][SouthEast 2]  
    从上图我们可以很**清楚**地看到一个圆角矩形…（不要脸…）
 *  提取形状  
    shape-outside:url(img/1.png);  
    shape-image-threshold: 0.9;
    
    **shape-image-threshold: 0.9;**：用于创建形状像素的最小不透明级别，值在0-1之间

注意：**要使用shape，元素必须是浮动的**。因为浮动是为文字环绕而生的。  
**还必须有宽高。**

如有纰漏，还请各位看官不吝指出。  
挚谢阅读。

[SouthEast]: /images/20220605/195b5f615aea4c938579e93ab8ae356b.png
[SouthEast 1]: /images/20220605/05b8392e0b4140c096cf211ed0615124.png
[SouthEast 2]: /images/20220605/d65aca8effc4445cb855260feda854c7.png