css3 shapes是什么意思,如何在Web中使用CSS Shapes

布局一般都是遵循按行和列等线性原则，Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好，更灵活，但相对于印刷媒体而言，Web布局总体上还是受到很好的限制，特别是内容流上。

杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。

直到目前为止，Web上的布局都局限于规则矩形排列，无法让内容流实现非矩形布局。

接下来让我们一起探讨如何使用CSS Shapes模块让Web布局能像杂志和报纸一样让文本内容实现不规则矩形排列。

CSS Shapes简介

CSS Shapes使网页设计师能更好的实现自己的创意，除了简单的长方形和正方形，还可以实现任何几何图形布局。改规范提供了两个新的CSS属性：shape-outside和shape-margin。浏览器支持这些规范是有一定道理的，尽管这些属性目前仅可以在Chrome、Opera和Safari看到效果，而且还需要带上浏览器的私有属性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。

shape-outside属性将使用内容能绕着不规则几何图形排列，不在是中规中距的矩形。最初也可以让内容在一个元素内呈现，比如几何图形是一个圆形，那么文本在这个圆形内呈现，文本也将呈现成一个圆圈形状。然而这效果已经推迟到CSS Shapes Level 2中实现。

让文本在一个几何图形内呈现，使用的是CSS Shapes中的shape-inside属性。

shape-margin属性用来设置使用了shape-outside的几何图形与环绕它文本之间的间距。

看上去非常强大，也很有意思，写个实例来验证一下前面所说的。

创建一个图形

创建一个圆是CSS创建一个图形(不是矩形)最简单的。使用一个div来制作这个圆，并且在这个圆的边上放置几个段落p。

Lorem ipsum…

写一点基本样式，给.circle元素设置一个相同的width和height，使用border-radius将div变成一个圆，并且设置一个float，让段落围着这个元素。

.circle {

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

}

除了段落现在围绕着该元素.circle之外，文本还是没有变成曲线绕着圆形。那是由于border-radius属性实际上并无法改变一个元素形状，它依旧是一个矩形。

通过浏览器开发者工具(DevTools)的审查元素可以发现，事实上.circle仍然是一个盒子。即使这个div的外观看上去是一个圆，但实际上它没有元素看到的实际形状。

为了让段落呈现成一个圆形，实际上我们就需要通过shape-outside属性改变元素的实际形状。在本例中，将给shape-outside设置一个circle()属性值。

.circle {

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

-webkit-shape-outside: circle();

shape-outside: circle();

}

这个时候，再使用开发者工具审查元素，不难发现元素正确渲染成一个圆。

添加一定的margin值，你可能看到的效果就像下面：

自定义圆

circle()函数可以定义圆的半径和圆心位置：circle(r at x y)。默认情况，半径值来源于元素容器大小，如果元素宽度是300px，那么圆的半径就是其宽度的一半150px。

同样，x和y坐标也是相对于元素尺寸。默认的坐标是50% 50%，也就是元素的正中间。

当你想保持元素实际的大小，形状和位置，而又想调整形状，这两个值相当有用。以下面的示例中，将圆的半径调整为60px，圆心坐标调整为30% 70%,相当于把圆调整到元素的左下角。

值得注意的是，当修改圆心坐标和半径时必须显式的定义，如果只添加其中的任何一个，都将是一个无效的值：

circle( 60px at 30% 70% ) // 正确写法

circle( 60px ) // 无效写法

circle( at 30% 70% ) // 无效写法

图形盒模型

CSS Shapes继承了元素相同的盒模型，但应用元素以外的范围。比如说，允许我们把元素的border-box设置为padding-box。改变图形盒型只需要给shape-outside属性上添加盒模型的关键字：content-box、margin-box、border-box或padding-box。

.circle {

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

padding: 10px;

border: 20px solid #ccc;

margin: 30px;

-webkit-shape-outside: circle() padding-box;

shape-outside: circle() padding-box;

}