全方位了解CSS3的Regions扩展

这是一个adobe的提议：css Regions，提供在多个不同元素中排布内容的方法。首先需要为内容容器声明一个flow属性独一无二的字符值，然后通过from（）函数和内容的属性确定内容将会在哪些元素内排布：
1. .content { flow: foo; }
2. .target1, .target2 { content: from(foo); }
首先将内容容器中的内容放置到第一个元素target1中，如果有溢出，就将溢出的部分放在target2中显示。说得更明白一点，她不是在另一个target中重复内容，而是继续在第二个target中显示1中没有完全显示的内容。请看下面的例子：

如果你想要单独地指定一托内容(比如文字和图片)，那些内容如何在一串区域内显示(flow)呢？这正是内容流(content flow)要做的。

要使用它，通过flow属性赋予内容的容器一个名字，这样做会将内容从普通的CSS布局流中去掉，然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。

上面的三列布局的代码如下：

CSS

1. #source {
2.     flow: “main-thread”;
3. }
4. .region {
5.     content: from(main-thread);
6.     background: #C5DFF0;
7. }

HTML

1. <div id=“source”> <p>Lorem ipsum dolor […]</p> </div>
2. <div id=“region1” class=“region”></div>
3. <div id=“region2” class=“region”></div>
4. <div id=“region3” class=“region”></div>

文字内容显示在自定义形状的内部

要使用这个特性，你需要使用wrap-shape属性来定义形状，并设定wrap-shape-mode属性为需要的值。通过制定content的值，文字将显示在形状内部。

上面的现实心形的代码如下：

CSS

1. .circle{ /* 定义元素形状为一个圆*/
2.     wrap-shape: polygon(0px, 150px /* …更多点*/);
3.     wrap-shape-mode: content;
4. }
5. .heart{ /* 定义元素形状为心形*/
6.     wrap-shape: polygon(150px, 32px /* …更多的点 */);
7.     wrap-shape-mode: content;
8. }

HTML

1. <div class=“circle”></div>
2. <div class=“heart”></div>

文字环绕在自定义图形周围

CSS

1. .exclusion{
2.     /* 文字环绕整个元素 */
3.     wrap-shape-mode: around;
4. }

HTML

1. <div class=“exclusion circle”>
2.     <p>Lorem ipsum dolor […]</p>
3. </div>