HTML5和CSS3的功能完全超越5年前我们在web上所能做的事。CSS Shapes Module Level 1（CSS形状模块标准1）规范有可能打破web中矩形盒模型的限制而且将网页设计提升到新的高度。它允许元素设计成不同的形状(圆形或五边形的div)，并且用更自然的方式让文字环绕着元素（文字可以环绕着你的曲线设计而不一定要有直角边界）。本文将通过一些小演示来检测CSS Shapes的可能性，并且帮助你开始探索之旅！

方块套方块:这是我们网页一直以来的样子。通过使用CSS，我们一直试图摆脱这种创建几何形状的限制,但这些形状没有影响形状内的内容,或者与页面其他元素相互影响。由Adobe在2012年中期提出的新的CSS shapes 规范 改变了这一现状。它的目标是为web设计人员提供一种新的方式，来使内容流入或者环绕在任意复杂的形状上——除了使用javascript，我们从来不曾做到这点。

使用CSS shape我们可以使内容“流向”非矩形区域。有时我们希望能够把内容填充到一个元素中的多个不同形状的区域内。如果你读过我之前的文章,您会知道,这可以用CSS形状,使用一个图像，这个图像用alpha透明度定义了多个形状,让浏览器提取内容并浮动到区域上。我们可以发挥创意定义形状,使文本流入多个区域,不过这样很容易地使内容几乎完全丧失可读性。

当CSSshape会造成一个严重的可访问性问题时，不推荐使用。我们乐于使用各种创造性的布局与自定义形状,但最应该让我们铭记的是,内容是可读的,所以设计师设计吸引人的布局时，必须考虑可访问性和可读性。

为了更好地说明这一点,我们看一个例子,这个例子中CSS shape会导致非常糟糕的阅读体验。事实上,这不是CSS shape造成的,这是设计师的决定。

在Web页面中布局要做到类似于报纸和杂志那样的生动，自由。对于任何前端人员来说都是一件头痛的事情。而偏偏很多时候设计师碍于前端人员无法实现，而不能更好的自由发挥其创意。为了使页面布局更加灵活到如印刷媒体一般,一个新的CSS3模块出现了——CSS3 regions。相比通常的在多个元素中放置内容，此模块允许内容流在页面的指定区域(regions)放置。让我们看看这个模块是如何工作的。

大家都知道，css有着奇妙的特性，然而让人失望的是，css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变，更多的动态页面正是由css所支持的，正如peter gasston所说的。这是一篇关于css布局且具有前瞻性的 文章。在这里，我能够保证在数年之后，css3必定能够引领潮流。在这篇文章当中，我将为大家从优秀实用到纯粹理论阶段中介绍有关css布局的工具，也许在这些阶段中你不一定用得到他们，（至少不是现在），但仍然还很有必要去了解，通过这样可以透过迷雾，看清未来。