css布局——Shapes布局

CSS Shapes布局用于实现不规则的图文环绕效果，需配合float一起使用。
兼容性: 除IE和Edge外都支持

shape-outside

指定图形边缘

1. 关键字

<div class="container">
    <span class="shape margin-box"></span>
    <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
    <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
</div>

.shape {
    float: left;
    width: 60px; height: 60px;
    padding: 10px; margin: 10px;
    border: 10px solid;
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
    color: #cd0000;
}
.margin-box {
    shape-outside: margin-box;
}

完整效果和代码见 https://demo.cssworld.cn/new/6/4-1.php

2. 形状函数

效果和代码见 https://demo.cssworld.cn/new/6/4-2.php

圆circle()

circle( [<shape-radius>]? [at <position>]? )

shape-radius（圆半径）和position（圆心位置）都是可以省略的

shape-outside: circle();
shape-outside: circle(50%);
shape-outside: circle(at 50% 50%);
shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50px at 50px 50px);

shape-outside: circle(50% at 0% 50%);

椭圆 ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

• shape-radius 水平半径和垂直半径
• position 椭圆的圆心位置

shape-outside: ellipse();
shape-outside: ellipse(50px 75px);
shape-outside: ellipse(at 50% 50%);
shape-outside: ellipse(50px 75px at 50% 50%);

ellipse(farthest-side closest-side at 25% 25%)

• farthest-side 最长边的长度
• closest-side 最短边的长度

内矩形 inset()

inset( <shape-arg>{1,4} [round <border-radius>]? )

shape-arg是必须参数，可以是1～4个值，这4个值分别表示以当前元素的4个边缘为起点，从顶部、右侧、底部和左侧向内偏移的大小。这4个值支持缩写，即使用1个、2个、3个或4个值，具体的缩写规则和margin、padding等属性的缩写规则一致。

border-radius 表示矩形形状的圆角大小，可以不设置。

shape-outside: inset(10px);
shape-outside: inset(10px 20px);
shape-outside: inset(10px 20px 30px);
shape-outside: inset(10px 20px 30px 40px);

shape-outside: inset(10px 20px 30px 40px round 10px);

多边形 polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

fill-rule表示填充规则，可以是nonzero和evenodd，默认值是nonzero。
常见用法为

polygon( x1 y1, x2 y2, x3 y3, ... )

小括号中的值就是多边形的点坐标

shape-outside: polygon(0 0, 0 100px, 100px 200px);
shape-outside: polygon(0 0, 100px 0, 0 50px, 100px 100px, 0 100px);

Firefox浏览器内置了一个形状编辑器，你可以在Inspector面板中通过点击多边形可视化地生成我们需要的polygon()坐标代码。

3. 图像类

URL不规则图像

效果和完整代码见 https://demo.cssworld.cn/new/6/4-3.php

.shape {
    float: left;
    width: 200px; height: 300px;
    /* 文字环绕这个鹦鹉 */
    shape-outside: url(./birds.png);
    /* 鹦鹉赋色并显示 */
    background-color: #cd0000;
    mask: url(./birds.png) no-repeat;
}

使用的URL图像是有跨域限制的，不是同域名的图像是没有沿着图像边缘环绕的效果的，除非图像请求的Access-Control-Allow-Origin头信息中配置了当前域名站点。

gradient渐变与环绕

渐变可以是线性渐变、径向渐变、锥形渐变和对应的重复渐变。

.shape {
    float: left;
    width: 150px; height: 120px;
    --gradient: linear-gradient(to right bottom, #cd0000, transparent 50%, transparent 
90%, #cd0000);
    shape-outside: var(--gradient);
    background: var(--gradient);
}

效果和完整代码见 https://demo.cssworld.cn/new/6/4-4.php

shape-margin

控制文字环绕图形时文字与元素边界的距离。

/* 长度值 */
shape-margin: 10px;
shape-margin: 20mm;
/* 百分比值 */
shape-margin: 60%;

• 只支持1个属性值
• 有效数值范围是有限制的，即从0到浮动元素的边界，当shape-margin的属性值超过浮动元素边界的时候，布局效果如同普通浮动布局效果，没有不规则的图形环绕效果。

效果和完整代码见 https://demo.cssworld.cn/new/6/4-5.php

shape-image-threshold

图像环绕时候的半透明阈值

默认是0.0，也就是图像透明度为0的区域边界才能被文字环绕。同理，如果属性值是0.5，则表示透明度小于0.5的区域都可以被文字环绕。

shape-image-threshold: 0.0;
shape-image-threshold: 0.3;
shape-image-threshold: 0.6;
shape-image-threshold: 0.8;

效果和完整代码见 https://demo.cssworld.cn/new/6/4-6.php

经典范例—— 椭圆中排版文字

原理：绘制两个内凹的圆弧径向渐变，并让这个圆弧正好和元素的圆角圆弧匹配

效果和完整代码见 https://demo.cssworld.cn/new/6/4-7.php

<p class="circle">
    <before></before><after></after>
    在CSS Shapes布局问世之前，让网页中的文字像杂志一样有任意样式的排版是很难的，过去一直都是用网格、盒子和直线构造排版样式。CSS Shapes布局允许我们定义文本环绕的几何形状，这些形状可以是圆、椭圆、简单或复杂的多边形，甚至是多彩的渐变图形。
</p>

.circle {
    border-radius: 50%;
    width: 207px; height: 240px;
    color: white;
    background-color: deepskyblue;
    text-shadow: 1px 1px rgba(0,0,0,.5);
    padding: 10px;
    text-align: justify;
}
before {
    float: left;
    width: 50%; height: 100%;
    shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red);
}
after {
    float: right;
    width: 50%; height: 100%;
    shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);
}