CSS shape-outside属性的用法（附带实例）

CSS 中的 shape-outside 属性用于重新定义元素的边界，让其看上去不再是个矩形。

先来看一个不使用 shape-outside 属性的效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img { float:right;}
</style>
</head>
    <body>
        <img src="/img/mars.png" alt="火星" border="1">
        <p>
        火星是太阳系八大行星之一，属于类地行星，
        ……
        </p>
        <p>
        火星有两颗天然卫星：火卫一和火卫二，
        ……
        </p>
        <p>
        火星基本上是沙漠行星，地表沙丘、砾石、陨石遍布。
        ……
        </p>
    </body>
</html>

默认情况下，元素的形状是标准的矩形，页面显示效果见下图：

下面的样式使用了 shape-outside 属性，功能是让文字随着火星的圆形边界排列：

<style>
img {
    float: right;
    shape-outside: url(/img/mars.png);
    shape-margin: 1em;
}
</style>

页面显示效果见下图：

示例中，shape-outside 属性使用 url() 函数引用的图片定义了元素的边界。其原理是将图片的不透明部分作为元素的边界。这里有一个小技巧，即含有透明部分的图片，可以使用它自身作为边界定义的图片。

使用含有透明部分的图片定义元素边界时，还可以使用 shape-image-threshold 属性设置一个阈值，会将不透明度（alpha值）大于此阈值的部分作为有效的元素区域。和设置颜色不透明度一样，shape-image-threshold 属性的取值范围也是 0（完全透明）到 1（完全不透明）。

另一个相关的属性是 shape-margin，其功能是设置元素边界与相邻元素的距离，本例设置为 1em。

除了图片，还可以使用图形定义元素边界，相关的函数包括：

circle() 函数，定义一个圆形，格式为 circle(<半径> at <圆心>)。如 circle(100px at 50%) 就是指定一个半径为 100 像素，圆心在元素中心位置的圆形区域。
ellipse() 函数，定义一个椭圆形，格式为 ellipse(<X轴半径> <Y轴半径> at <中心>)。如 ellipse(100px 50px at 50% 50%) 就是定义 X 轴半径为 100 像素，Y 轴半径为 50 像素，圆心在元素中心位置的椭圆形区域。
polygon() 函数，使用多组坐标定义一个多边形区域，参数中，每组数据定义一个顶点坐标，如 polygon(10px 20px,30px 40px,50px 60px;)。

下面的样式使用 circle() 函数定义火星图片的边界：

<style>
img {
    width: 300px;
    float: right;
    shape-outside: circle(150px at 50%);
    shape-margin: 1em;
}
</style>

页面显示效果见下图：

下面的样式使用一个三角形作为火星的边界：

<style>
body {background-color: black;}
p {color: white;}
img {
    width: 300px;
    float: right;
    shape-outside: polygon(150px 1px, 1px 299px, 299px 299px);
    shape-margin: 1em;
}
</style>

页面显示效果见下图，其中的白色三角就是定义的图形区域：

shape-outside 属性中，另一个可以设置区域的函数是 inset() 函数，可以定义元素内的一个矩形作为区域边界，其参数分别定义上、右、下、左方向距离元素原始边界的距离。这里，参数的设置与 margin、padding 属性相似，可以使用如下格式：

四个参数，分别设置上、右、下、左方向的距离。
三个参数，分别设置上、右、下方向的距离。
两个参数，分别设置上、右方向的距离。
一个参数，同时设置四个方向的距离。

下面的样式演示了 inset() 函数的应用：

<style>
body {background-color: black;}
p {color: white;}
img {
    width: 300px;
    float: right;
    shape-outside: inset(100px);
    shape-margin: 1em;
}
</style>

页面显示效果见下图：

inset() 函数中，还可以使用 round 关键字设置矩形的圆角半径，如下面的样式：

<style>
body {background-color: black;}
p {color: white;}
img {
    width: 300px;
    float: left;
    shape-outside: inset(100px round 50px);
    shape-margin: 1em;
}
</style>

页面显示效果见下图：

CSS shape-outside属性的用法（附带实例）

相关文章