这些天我们使用CSS的变形制造各种CSS形状，但所有这些形状不影响内容或让内容围绕他们。也就是说，如果你用CSS创建的三角形或梯形，例如，创建的形状没有影响文档流或是文本无法围绕它们。
通过在Web页面引入CSS形状，内容围绕自定义形状或印刷中的非矩形布局再现网页中，这或许都是大家期待的。
在本文中我们将复习基本的CSS形状，并使用这些新的CSS技术创建一些简单的布局。当更多的CSS形状的特性实现，我们就可以实现更多的复杂的，可怕的布局，现在我们可以通过一些实验创建一些很有趣很有创造力的布局。
这篇文章中讨论的是CSS的前沿技术，并不支持所有的浏览器。如果你想看到有这些效果，你需要确保你的浏览器支持这些技术。你不需要一个支持的浏览器来理解这些特性和演示。因为这里有一些演示的截图，这样你可以看到最终你想看到的效果。
在撰写本文的时候，只有Chrome Canary支持带有前缀的CSS形状，但仍需要通过chrome://flags/进行设置。确保你开启了CSS形状特性。
你可以点击每个演示的截图来查看每个DEMO效果。
请注意，当更多的规范实现的时候，文中提到的信息可能改变当前支持的CSS形状。
##声明变形
所有HTML元素都有一个矩形的盒模形，用来管理文档流以及文档围绕在元素的四周。为了给一个元素自定义一个非矩形的形状，可以使用shape-inside和shape-outside属性。在撰写这篇文章的时候，shape-outside属性只可以应用于浮动元素，而shape-outside属性不能完全支持，所以你现在使用的时候会发生一些错误。而且shape-*属性只能适用于块级元素。如果你想将变形属性必须将元素转换为块元素。
shape-*属性采有三个值中的一个：auto，一个基本的形状或一个图像的URL。如果将其值设置为auto，元素浮动区域使用正常的margin。（如果你不熟悉CSS盒模型，你必须得先阅读它，因为你得知道它是如何工作的）。
如果要给变形函数设置一个值，可以选择期中的一个值：rectangle,inset-rectangle,circle,ellipse或者polygon。通过Adobe团队的这篇文章你可以了解更多关于变形函数的功能。
最后，如果该值被设置为一个图像的URI，浏览器会基于图像的alpha通道提取和计算出形状。计算机计算形状的路径包含的图片指定的透明度大于shape-image-threshold值。如果没有指定shape-image-threshold的值，那么其默认值为0.5。图像应该是CORS-same-origin，否则，它不会工作，计算机计算形状的默认值为auto。
如果使用shape-outside属性定义的形状不会围绕一个元素，而使用shape-inside属性定义的形状会围绕一个元素。我们将在下面的例子中了解每种方法的使用。
通过shape-*属性定义的变形可以通过shape-margin和shape-padding属性来修改。变形的margin和padding都是不言而喻的。
##在元素上建立一个坐标系统
对于CSS形状实际应用在元素上，我们通过一个坐标他信息来绘制形状。
坐标系统是必要的，在坐标系统上，形状将被定义成一组点（通过半径画员或椭圆）和使用X，Y坐标定义坐标。
shape-*属性使用元素的内容盒子来定义他们的坐标系统，所以为了让他们工作，你需要给元素定义一个固定的宽度和高度，这也是用来给你绘制形状建立坐标系统。如果没有显式指定宽度和高度，shape-*属性不能正常工作。
坐标系统的原点定义在元素边框的左上角。
所以，要给一个元素绘制一个形状，必须要先做到：
- 为了使用形状，指定元素尺寸(记住：使用shape-outside元素是浮动在周边)
- 使用shpae-*属性决定元素的形状
##使用背景来自定义形状
虽然边界用于包装内联内容外的浮动可以定义形状，实际的盒模型模式并没有改变。如果元素有指定的
margin、padding或border，他们将根据CSS3盒模型进行计算和渲染。——W3C CSS Shapes Module Level 1
换句话说，使用shape-*属性定义元素形状仅影响元素的浮动区域，即这个元素内/外的流动的内容，但元素其他属性不受影响。
例如，假设你只想画一个圆形，喜欢的内容浮动在其侧，如下图所示，你必须首先声明元素的圆形形状(再一次，记住浮动元素，并给它一个高度和宽度)。然后，你给圆形应用一个背景颜色，看起来更像一个图像。
你会想只是给一个包含元素添加一个背景颜色，然后最终有上面的结果(这是我第一次做)，但这样做不会做这项工作。原因是，元素的所有属性，除了围绕在外面的内容流，不会影响你的形状，而且们他们的内部定义将根据元素的盒模型(矩形)呈现，我们已经看到了规范。所以如果你定义一个背景颜色，你就会有下面这样的效果。
所以，我们能只给形状运用颜色而不是整个元素？这就需要CSS朦板规范的clip-path属性帮忙。
这个clip-path属性将被运用元素的剪切部分，我们不需要和保持定义的内部形状那部分。这显然意味着我们实际上不应用有颜色的形状，我们只需要他们微调元素，只留下完整的形状。这样，你就会有一个浮罢的圆外面被文本包含。
究竟如何？clip-path属性的什么值可以做这些呢？
用户通过clip-path属性定义的图形来定义坐标系统确定剪切路径包围元素，所以shape-*属性具有相同的坐标系统。
正因为如此，我们在剪切路径上使用shape-*属性定义相同的形状，元素内容夹在形状的周围。我们最终会得到一个自定义形状与背景。
你可以在pen测试这个概念，只要确保你测试在浏览器能运行(目前只有Chrome Canary)。